CODEWITHSUNDEEP
htmliphonejquery-mobile
eastwater
eastwater

Reputation: 5630

jquery mobile: field contain clipped

<form>
<div class="ui-field-contain">
    <fieldset data-role="controlgroup">
        <legend>Username:</legend>
        <input type="text" name="username">
    </fieldset>
</div>
</form>

If I set a form width

form {
width: 300px;
}

On Iphone 4s, in portrait mode, the username label is shown on the same line as the username input, and the username label is clipped. If there is not enough width for both username label and input, the label should be displayed above the input. Why? If I remove the width:300px, it is responsive to width well.

In landscape mode, the username label is shown above the input (as expected).

Thanks

Upvotes: 0

Views: 678

Answers (1)

ezanker
ezanker

Reputation: 24738

The field contain uses media queries based on screen width to place the label. You can use some CSS to override the media query CSS when you fix the form size:

<form>
    <div class="ui-field-contain">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" />
    </div>
</form>

form {
    width: 300px;
}
form .ui-field-contain {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
    margin: 0 !important;
}
form .ui-field-contain label, form .ui-field-contain div {
    float: none !important;
    margin: 0;
    margin-bottom: 0.4em;
    width: auto !important;
}

Here is a DEMO

Upvotes: 1

Related Questions