Dynamic select and select options breaking styling


Topic: Dynamic select and select options breaking styling

Arnt Oddvar Pedersen pro asked 2 years ago

Expected behavior

Creating a select element should be styled

Actual behavior

No styling applied to select element

Resources (screenshots, code snippets etc.)

I'm adding some select options dynamically using Sweetalert2.

import Swal from 'sweetalert2';
Swal.fire({
   title: 'my title',
   html: '
       <select class="select" id="mySelectElement">
          <option value="1">One</option>
          <option value="2">Two</option>
       </select>
       <label class="form-label select-label">Example label</label>
    ',
    didOpen: () => {
     $('#mySelectElement').append(`
       <option value="3">Three</option>
       <option value="4">Four</option>
       <option value="5">Five</option>
     `);
    },
});

This issue is sort of two-fold. Dynamically adding a select element makes it appear as unstyled. (Default browser styles) And if you dynamically add options to the element, the select element itself stops working. (You can't select an option).

Is there a workaround for this, or is this the expected behaviour? Other input outlines and styles is easy enough to update through the .update() or .init() function.


Arkadiusz Idzikowski staff answered 2 years ago

When you add the component template dynamically it won't be initialized automatically via select class. In this case, you would need to initialize it manually with a new keyword as explained in the documentation (API section):

https://mdbootstrap.com/docs/standard/forms/select/#api-section-usage

We will consider adding a public init method because it can be useful for similar use cases.


Arnt Oddvar Pedersen pro commented 2 years ago

Hmm. I thought I already tried adding it through the constructor! I'll give it a go and post back if there is any issues. Thank you!


Arnt Oddvar Pedersen pro commented 2 years ago

@Arkadiusz Idzikowski Tried adding the Select element dynamically, however it doesn't seem to listen to methods, or the dropdown object is gone: https://i.imgur.com/FV3zS1w.png

Added the select html to the rendered template, and initializing it. Renders it properly, looks fine, but the dropdown is gone as you can see in the picture linked.


Arkadiusz Idzikowski staff commented 2 years ago

@Arnt Oddvar Pedersen Could you paste the full HTML/JS to the first post, so we can reproduce this problem on our end?

Are there any errors in the console when you initialize the component or try to open the dropdown?


szaiftamas pro premium priority commented 10 months ago

This init() function is useful for "select", I also would like to use it.


Grzegorz Bujański staff commented 10 months ago

Unfortunately we have not decided to add such a method for now. But you can very easily initialize select. Take a look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3290738#js-tab-view


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: No