mdb-select not setting ACTIVE class for selected option

Topic: mdb-select not setting ACTIVE class for selected option

szq pro asked 6 years ago

On page load, the form displays the previous selected item - ie the :selected item is displayed, but the .active class is NOT being set on the constructed

Add comment

Adrian Sawicki free answered 5 years ago

0 0 Best answer

Hello Detiege Guillaume, Thanks for your answer solving the problem of szq.

transpera pro commented 4 years ago

This still appears to be the case in the current build. When you init the $('#').material_select() it doesn't automatically set the '.active' class on the current selected item. Functionality isn't affected, but ux is since there's no initial indication on the dropdown of which item is currently selected on init.

Add comment

harc pro answered 5 years ago

0 0 Best answer

MDB team - first, thanks for a great product...

I concur there is an issue here as reported above; at load the selected value does pre-fill into the label for the select drop down, however it's corresponding option lacks the "active selected" class definitions which give the selected option the highlight/background color when the list is opened. When a page is loaded and the drop down is opened by user, all options appear unselected, which is an unusual experience.

I first attempted to resolve by adding the css classes "active selected" to my selected option, but that was not carried into the <li> that is rendered due to the mdb.js code that yields the options. Rather than adjust this with after the fact javascript, I looked into the mdb.js source code and found that css classes for options are not being included by the code that renders the select component; I modified as follows - perhaps the dev team will want to include in a future patch - other developers are welcome to also benefit of course.

<pre><code>
// 05.09.2017 - Michael Harclerode (aka Harc)
// mdb.js - original source lines were 10093 - 10107
// Harc modification to below if statement block;
// the original code wasn't allowing including carry of defined css class for an option
// (I also reduce unnecessary waste of outputting "class" strings if there are no classes)

// ---- BEGIN Harc modification section
if (!classes) classes = ''

// Check for multiple type.
if (type === 'multiple') {

if (classes || !!disabledClass) {
      options.append($('<li class="' + disabledClass + classes + '"><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'))
  }
  else {
      options.append($('<li><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'))
  }

}

else {
  if (classes || !!disabledClass) {
      options.append($('<li class="' + disabledClass + classes + '"><span>' + option.html() + '</span></li>'))
  }
  else {
      options.append($('<li><span>' + option.html() + '</span></li>'))
  }
}

// -- END Harc modification for code block
</code></pre>

Please insert min. 20 characters.

MDB team - first, thanks for a great product... I concur there is an issue here as reported above; at load the selected value does pre-fill into the label for the select drop down, however it's corresponding option lacks the "active selected" class definitions which give the selected option the highlight/background color when the list is opened. When a page is loaded and the drop down is opened by user, all options appear unselected, which is an unusual experience. I first attempted to resolve by adding the css classes "active selected" to my selected option, but that was not carried into the

that is rendered due to the mdb.js code that yields the options. Rather than adjust this with after the fact javascript, I looked into the mdb.js source code and found that css classes for options are not being included by the code that renders the select component; I modified as follows - perhaps the dev team will want to include in a future patch - other developers are welcome to also benefit of course.


// 05.09.2017 - Michael Harclerode (aka Harc)
// mdb.js - original source lines were 10093 - 10107
// Harc modification to below if statement block;
// the original code wasn't allowing including carry of defined css class for an option
// (I also reduce unnecessary waste of outputting "class" strings if there are no classes)

// ---- BEGIN Harc modification section
if (!classes) classes = ''

// Check for multiple type.
if (type === 'multiple') {

  if (classes || !!disabledClass) {
      options.append($('<li class="' + disabledClass + classes + '"><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'))
  }
  else {
      options.append($('<li><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'))
  }

}

else {
  if (classes || !!disabledClass) {
      options.append($('<li class="' + disabledClass + classes + '"><span>' + option.html() + '</span></li>'))
  }
  else {
      options.append($('<li><span>' + option.html() + '</span></li>'))
  }
}

// -- END Harc modification for code block

Add comment

detiege guillaume free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Same thing happened to me, we can't set selected option, because active is missing, You must add this in the javascript :

var activateOption = function (collection, newOption, firstActivation) {
            if (newOption) {
                collection.find('li.selected').removeClass('selected');
                var option = $(newOption);
                option.addClass('selected active'); /*Here Add active*/
                if (!multiple || !!firstActivation) {
                    options.scrollTo(option);
                }
            }
        };

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

Hello, Could you show me your code? Regards, Adrian

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

szq

Pro User 10Support score
4Questions 1Answers 0Snippets