Skip to content

Responsive label missing offset properties #723

@ggam

Description

@ggam

Have a look at this example:

                <b:form horizontal="true">
                        <b:inputTextarea rows="3" placeholder="Username" required="true" label="E-mail:" renderLabel="true" offsetXs="2" labelColXs="2" colXs="6">
                            <f:facet name="prepend">
                                <b:icon name="user" />
                            </f:facet>
                        </b:inputTextarea>

                        <b:inputTextarea rows="3" placeholder="Password" label="Password:" renderLabel="true" offsetXs="2" labelColXs="2" colXs="6">
                            <f:facet name="prepend">
                                <b:iconAwesome name="key" />
                            </f:facet>
                        </b:inputTextarea>
                    </b:form>

What I want is to put an offset of 2 at the begining, and 2 more columns at the end.

The result is the following:

captura de pantalla de 2017-04-23 11-26-13

Adding more classes there seems overkill, but the workaround for now is a bit verbose:

<b:form horizontal="true">
                        <b:row>
                            <b:column offsetXs="2" colXs="8">
                                <b:inputTextarea rows="3" placeholder="Username" required="true" label="E-mail:" renderLabel="true" labelColXs="2" colXs="10">
                                    <f:facet name="prepend">
                                        <b:icon name="user" />
                                    </f:facet>
                                </b:inputTextarea>
                            </b:column>
                        </b:row>

                        <b:row>
                            <b:column offsetXs="2" colXs="8">
                                <b:inputTextarea rows="3" placeholder="Password" label="Password:" renderLabel="true" labelColXs="2" colXs="10">
                                    <f:facet name="prepend">
                                        <b:iconAwesome name="key" />
                                    </f:facet>
                                </b:inputTextarea>
                            </b:column>
                        </b:row>
                    </b:form>

I think a better solution should be researched.

Metadata

Metadata

Assignees

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions