JQuery Mobile: Styling does not apply to dynamically populated Select elements

I've been struggling to apply jQuery Mobile styles to a select element that is dynamically filled. Even after attempting to add themes, manual styles, refreshing,

$('.ui-page-active').trigger('create');
, and more, I still can't get it to work. Here is the select element:

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

Here is how I 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 displays the correct styles, however, nothing else does. When I add

geocodeOption.className = geocodeOption.className + ' ui-btn';
the select just appears as a select and a button, with the options lacking any styling.

I also attempted to gather insights from the jQuery forms link 1 and link 2 but had no success. My jQuery Mobile version is 1.4.2.

Answer №1

This wasn't really an issue for me. I couldn't customize the appearance of the options, as a general rule, options cannot be styled. However, it turned out not to be a problem because the Android OS automatically applied styles to the options. I initially didn't realize this because Google Canary displayed the Windows option styles instead of the Android ones.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Flexbox margins (exceeding 100% total width)

Currently collaborating with @c4rlosls and we are facing 2 issues: https://i.sstatic.net/44WcI.jpg If the parent container with class container-fluid has a px-0, it extends beyond 100% width. Additionally, the elements with classes .cont2 a and .cont3 a do ...

Resizable icon next to inline element caused width adjustment

I have a group of individuals listed, each with two elements side by side: a "contact me" button (an 'a' element with a fontawesome icon) and a tag displaying the user type (span element). Some users do not have a tag, and when there is one prese ...

Customize the background color of a Material UI row with varying colors for each cell

I am facing an issue with a Material UI table in React 18 where each cell has a different background color, causing the hover style on the row to break. Despite trying various solutions, I have been unable to find a resolution. For reference, you can see ...

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

Enhancing the mobile menu with a feature that allows users to easily close the

I am currently designing a mobile menu for a website that I created using Wordpress with the Divi Theme. When the user clicks on a "hamburger icon", it triggers a fullscreen menu to open: mobile menu If you tap on "Termine", it will reveal a submenu: mo ...

Unique approaches: Custom layouts compared to a single adaptive layout for managing various device sizes and orientations

When designing layouts for desktop, tablet, and smartphone in both portrait and landscape orientations within a Single Page Application, is it more effective to separate the layouts as different resources and load them dynamically based on device detection ...

Customizing Your WooCommerce Storefront: Tips for Enhancing Your Product Catalog and Minimizing White Space

Lately, I've been working on enabling a product filter in the left sidebar of my Woocommerce theme. However, I have noticed that the layout is not quite how I would like it to be. Take a look at this image that shows the changes I am aiming for. Cur ...

Ensure the slider functions on all types of browsers

I found a code snippet for an image slider on codepen and integrated it into my project. However, I encountered some issues trying to center the slider in the browser window with 5% space on each side. I attempted using $(window).width(); to set the width ...

Is there a way to align my horizontal menu with the top of the screen without encountering the hover problem?

I'm trying to make my horizontal navigation bar stay at the top of the screen. The issue is that when I set the top property to 0, the menu sticks to the top but the initial menu item is obscured when hovered over. If I remove the top property, the ho ...

Disabling CSS transitions and attempting to alter the style of an HTML element using JavaScript may not consistently work as expected

Currently, I am in the process of creating an animated effect for a website that involves moving two elements' positions over time and resetting them to their original position. Only one element is displayed at a time, and the animation should run smo ...

Tips for concealing the navigation bar during page printing in Bootstrap 5

When attempting to print the page body, I am encountering an issue where the vertical "navbar" continues to display and covers a portion of the content. Below is the code I am using to hide the navbar when printing: @media print and (min-width: 800px){ ...

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

I am looking for a way to hide the selected option in a Dropdown menu so that it does not appear in the next dropdown. For example, if "Hockey" is selected in the first dropdown, it should not be displayed in the second dropdown; only "Baseball and badmint ...

Full-screen and auto-cropping capabilities are featured in the Bootstrap 4 carousel design

Is there a way to make full-width images in the bootstrap 4 carousel cropped based on position: center, background: cover to prevent scrolling issues? I attempted to follow advice from this webpage but encountered stretching and scroll-bar problems with d ...

New ways to style Links in NextJs 13

I am relatively new to Next.js and I am attempting to create a menu with a hover effect using the following code: import Link from 'next/link'; const MenuItem = ({ href, label }) => ( <Link href={href} className="menu-item"> ...

Display the PrimeFaces dialog in the middle of the screen

I've encountered an issue with positioning dialogs on different pages. I tried using a CSS code to center them on the screen, but it didn't work as expected. .ui-dialog{ position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

Guide on displaying a partial form as a horizontal form in Rails 4

I am facing an issue with displaying a form horizontally instead of vertically in a partial triggered by AJAX on my main page. I have tried various methods like using <form class="form-inline">, <%=f.number_field :pointsSpend, :class => "checkb ...

Tips for changing the color of an underline in an <a> tag when it is hovered over

Is it possible to change the color of the underline in an <a> tag when hovering over it? After some investigation, it seems that direct color changes are not feasible. Instead, you can use the border-bottom option. However, my attempt did not yield ...

On iOS devices, background images may not appear in the Home Screen after being added

My CSS code looks like this: #thumbnail { background-image: url(bla.jpg), background-size: cover, background-repeat: no-repeat; background-position: 50% 50%; } While it displays fine on iOS Safari and other platforms, the image does not s ...

I am having trouble getting my CSS styles to apply to nested components within Bootstrap React components

Currently I am learning react and in the process of creating a website using react-bootstrap. While working on my navbar, I encountered an issue where I was unable to change the font and font-color of the navbar items. The CSS that I applied only affected ...

Exclusive Functionality: Bootstrap Drop Down Navigation in ASP.NET Only Functions on Main Pages

I am in the process of developing an internal application with ASP.NET 4.0 using the Yeti Bootstrap Theme. One issue I am encountering is with the navbar dropdown navigation. Pages that are located in the website's root can utilize the dropdown featu ...