CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
BeNdErR
BeNdErR

Reputation: 17927

JQueryMobile - set fieldcontain's labels width

I've google a lot, and this seems to be a common problem. In the past I solved this issue using a <table>, I know that JQM has some sort of data-grid but I'd like to solve it through CSS.

The problem is simple: I have n fieldset, composed by a <label> and an <input>, and I want to align all the labels/inputs together, for example.:

First:         [ input ]
Second:        [ input ]
Third:         [ input ]
...
Loooong-one:   [ input ]

This is an example of the issue: Fiddle

HTML

<div data-role="content">
    <div data-role="fieldcontain">
        <label for="first">First:</label>
        <input type="text" name="first" value="something" />
    </div>
    <div data-role="fieldcontain">
        <label for="second">Second:</label>
        <input type="text" name="second" value="something" />
    </div>
</div>

CSS

div[data-role='fieldcontain'] label{
    background: blue;
    width: 200px !important; /* this is not working :( */
}

As you can see, I'd like to give a fixed width (e.g. 200px) to all the <label> elements. The blue background was added only to test the correctness of the css selector I'm using.

Upvotes: 0

Views: 2498

Answers (2)

Jim H.
Jim H.

Reputation: 111

As of jqm 1.4.5, I found an easy way to do this is to insert in the following css somewhere after the jqm css has loaded. Just change the "#myForm" and "10em"'s to whatever suits your needs. Also appears to work fine without having to use id attributes.

CSS

@media (min-width:28em) {
    #myForm .ui-field-contain {
        min-height:2.5em;
    }
    #myForm .ui-field-contain > label {
        position:absolute;
        width:10em;
     }
    #myForm .ui-field-contain > label ~ [class*=ui-] {
        position:absolute;
        right:0;
        left:10em;
        width:auto;
    }
}

Fair warning, I'm the last person you should ask about this being a best-practice, so use at your own risk.

Upvotes: 0

ezanker
ezanker

Reputation: 24738

you need to add id to the inputs so the labels properly associate:

    <div data-role="fieldcontain">
        <label for="first">First:</label>
        <input type="text" id="first" name="first" value="something" />
    </div>
    <div data-role="fieldcontain">
        <label for="second">Second:</label>
        <input type="text" id="second" name="second" value="something" />
    </div>

Your labels will then automatically line up at the same width; however, the fieldcontain element causes the label to be 28% of the page and the input 72% of the page when the page is greater than 448px. When the page size is less than 448px, the label is stacked above the input.

In this scenario, your CSS setting label width will work, but because the input is set to 78%, you will not get the result you are looking for. If the 28%/78% split really does not work for you, you should abandon the fieldcontain element and implement your own divs displayed inline with floats.

Upvotes: 2

Related Questions