0

I am using jquery-mobile to get information from a user. I cannot seem to align the width of my select menu with the width of the text input fields.

On my fiddle, the select menu should look the same as the two text input fields. I am able to match the background and border colors for my select menu to look just like the text input fields. But when I adjust the width of the select menu, it does not align consistently with different phones and orientations.

Note: I am not sure why, but the ".wide .ui-select .ui-btn" on my css does adjust the color and border of the select menu, but it is not doing it on the fiddle. Nevertheless, I don't know how to match the widths for different browsers.

http://jsfiddle.net/halogenmobile/DWTkD/1/

Thanks in advance.

1
  • Put a fixed with to all input in your CSS. May 3, 2012 at 20:42

4 Answers 4

0

http://jsfiddle.net/DWTkD/2/

select {
    background: black;
    border: 2px solid white;
    color: #fff;
    padding: 2px;
    width: 123px;
}

​
0

It's hard to tell without the jQuery Mobile CSS applied as well, but my best guess would be that the box-sizing could be different, or that some amount of padding is changing it. If you have a live version somewhere that we can poke at, please share.

0

Your input and select inside the dom elements labeled as class="wide" are using their default widths. Use something like this to better control their widths:

.wide input, .wide select {
    width: 100%;
}

edit width: 100% with width: 123px to season to taste.

0

this might work:

$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).attr("width")})
    })
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.