CODEWITHSUNDEEP
cssjquery-mobile
user3070717
user3070717

Reputation: 33

jQuery Mobile: Blue focus halo gets clipped when placing controls inside ui-grid

Im trying to group text fields together on the same line using "ui-grid-a".

But the blue halo gets clipped on the left and right side of the fields.

    <ul data-role="listview" data-inset="true">
        <li>
            <label>Label A</label>
            <input data-id="name" type="text" value="" placeholder="" title="">
        </li>
        <li>
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <label>Label B</label>
                    <input data-id="email" type="text" value="" placeholder="" title="">
                </div>
                <div class="ui-block-b">
                    <label>Label C</label>
                    <input data-id="phone" type="text" value="" placeholder="" title="">
                </div>
            </div>
        </li>
    </ul>

Sample here: http://jsfiddle.net/N8ZUt/1/

Set focus to "label a" and then "label b" and you should see the difference.

Upvotes: 2

Views: 171

Answers (1)

ezanker
ezanker

Reputation: 24738

You just need to add a little padding:

li .ui-block-a, li .ui-block-b  {
    padding-right: 4px;
    padding-left: 4px;
}

Also, to keep things aligned, I have put your first list item in a ui-grid-solo with the same padding.

Here is your updated fiddle: http://jsfiddle.net/ezanker/N8ZUt/4/

Upvotes: 4

Related Questions