CODEWITHSUNDEEP
htmlcssjquery-mobile
user172783
user172783

Reputation:

jQuery Mobile horizontal select - minimum width

I can't figure out the CSS to give each select button a minimum or fixed width. By default the width adjusts to the content but I want to have a minimum. I have several rows and I want them to stay aligned as the selection changes.

There are similar questions for non-jqm select boxes where the solution is simply setting width attribute, but that doesn't work here.

Here is the jsfiddle:

http://jsfiddle.net/btppS/

Upvotes: 1

Views: 874

Answers (2)

bau
bau

Reputation: 143

Sometime the $(document).ready(..) is not really the right place in JQMobile (see this good link of Mark Dalgleish ). But to answer to your question and becasue i have similar problem i used the "pagebeforeshow" event to do it because the "pagecreate" was not enough in the event tree in my case.

So i did something as:

$('div[data-role=page]').live('pagebeforeshow',function(){ 
    $('.ui-select .ui-btn-text').css({'width':'60px'});
});

Upvotes: 0

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

If you want to change the width of the label you have to change inside the css this line:

.ui-btn-text{
   width:300px; //example
}

Instead if you want to change the select when you click on it you can try this code with jquery:

$(document).ready(function() {
 $('#select-choice-month').css('width', '200px');//insert your width this is only for the month
});

Upvotes: 1

Related Questions