CODEWITHSUNDEEP
htmljquery-mobile
Marc Van Houwelingen
Marc Van Houwelingen

Reputation: 15

Redraw select menu in JQuery Mobile

I am trying to make a JQuery Mobile select menu button larger by changing the data-mini property from true to false on the fly. I am able to change the property, but the select menu does not redraw.

It works with a button, by using .buttonMarkup({mini: false}) (which redraws the button instantly), but as far as I know there is no equivalent for select menus.

I have tried .selectmenu("refresh") and .change() - neither redraws the select menu button.

Here is an illustration of the problem: http://jsfiddle.net/YYXuZ/

Does anyone have a solution?

Upvotes: 1

Views: 115

Answers (1)

Ross
Ross

Reputation: 3330

Hey this works for me -

$('#testselectmenu').parent('div').addClass('ui-fullsize');

jsFiddle Demo

I noticed you won't need the $('#testselectmenu').selectmenu('refresh'); with this approach.

/Update

To play it safe I would do this (it does the same thing while removing the data-mini attribute and ui-mini class) - 

$('#testselectmenu').parent('div').attr('data-mini', 'false').removeClass('ui-mini').addClass('ui-fullsize');

I think jQM should handle this automatically when you call a .selectmenu('refresh'), I'm not sure why it doesn't.

Upvotes: 1

Related Questions