0

I cannot seem to get my jQuery Mobile styles to apply to my dynamically filled select. I have tried adding themes, adding the styles manually, refreshing, $('.ui-page-active').trigger('create'); etc. with no luck. The select:

<select id="CandidatesListBox" data-placeholder="true" onchange="myMethod()" style="width: 100%" aria-haspopup="true" class="candidatesList" data-theme="c" ></select>

To fill it:

var geocodeOption = document.createElement('option');
//fill option
if (_isMobile) {
    $('#' + geocodesList.id).append(geocodeOption);
    $('select#CandidatesListBox').selectmenu();
    $('select#CandidatesListBox').selectmenu('refresh', true);  
}

The select dropdown itself has the correct styles, but nothing else does. If I add

geocodeOption.className = geocodeOption.className + ' ui-btn'; the select just looks like a select and a button, and again the options contain no styling.

I also tried to read the jQuery forms link 1 and link 2 with no luck. I am using jQuery Mobile 1.4.2.

Soatl
  • 10,224
  • 28
  • 95
  • 153
  • create one fiddle and show how you are creating dynamically. – Aravin Jun 26 '14 at 08:05
  • This was actually not an issue. The problem was that I was testing in Google Canary, which does not generate options in the same format that an android tablet would (it generates them as Chrome would). On the android, the options are generated correctly – Soatl Jun 26 '14 at 18:11

1 Answers1

0

This is not actually an issue. I was unable to style the options, because in general, options cannot be styled. That was not a problem though because the Android OS handled the option styles. I was unable to see this because Google Canary did not render the Android option styles, but instead rendered the Windows option styles.

Community
  • 1
  • 1
Soatl
  • 10,224
  • 28
  • 95
  • 153