Multi select styling still not same as examples


Topic: Multi select styling still not same as examples

FvsJ101 pro asked 6 years ago

Hi guys i have the multi select in my code and the style with the tick box next selections still doesnt show.

<form action="{{ path_for('admin.team.member') }}" method="post">

    <div class="md-form">
        <select name="members[]" id="multiSelect" class="mdb-select colorful-select dropdown-primary" searchable="Search here.." multiple="multiple">
            <option value="" disabled selected>Choose your members</option>

            {% for member in members %}
                <option value="{{ member.id }}">{{ member.user.userFullname() }} {{ member.user.last_name | capitalize }}</option>
            {% endfor %}

        </select>
        <label>Members</label>
    </div>

    {{ csrf.field | raw }}

    <input type="hidden" name="team_id" value="{{ team.id }}">

    <div class="text-center">
        <button type="submit" class="btn mdb-color btn-md">Add Members</button>
    </div>

</form>

<script>

src="https://code.jquery.com/jquery-3.3.1.min.js"

integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

crossorigin="anonymous">

</script>

<!-- Bootstrap tooltips -->

<script type="text/javascript" src="http://localhost:9999/js/popper.min.js"></script>

<!-- Bootstrap core JavaScript -->

<script type="text/javascript" src="http://localhost:9999/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->

<script type="text/javascript" src="http://localhost:9999/js/mdb.min.js"></script>

<script type="text/javascript" src="http://localhost:9999/js/extra.js"></script>

<!--Add any extra javascript-->

<script>

$('document').ready(function () {

$('.mdb-select').material_select();

});

</script>

I have all the code stated in the examples but I dont get the same style as you guys. Please advise?


Piotr Glejzer staff answered 6 years ago

Hi, did you fix last bug what showed in our code? We will fix that bug globally in next release. Here is an example of how to fix that, you need to use gulp to compress material-select.js to mdb.mini.js You need to find your material-selecjt.js file. Next, you need to go to 160 line in material select. Change icon_url to iconUrl It should look like that :

if (iconUrl) {

 var classString = '';
 if (classes) {

 classString = ' class="' + classes + '"';
 }

 if (type === 'multiple') {

 options.append($('<li class="' + disabledClass + '"><img alt="" src="' + iconUrl + '"' + classString + '><span class="filtrable"><input class="form-check-input" type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'));
 } else {

 options.append($('<li class="' + disabledClass + optgroupClass + '"><img alt="" src="' + iconUrl + '"' + classString + '><span class="filtrable">' + option.html() + '</span></li>'));
 }
We are very sorry again about that bug. May you inform me that helped you? Best, Piotr

FvsJ101 pro commented 6 years ago

Hi Piotr, I think you misunderstanding. The code you posted above is how the current material-select.js file is setup with. What im asking is on the examples on the site you have tickboxes for selecting multiple items. Currently there is no check box next to the item they user is selecting. So what im asking is if you guys fixed the tick boxes that should be showing next to the item you selecting or not...? and why is yours working on the website what version of mdbootstrap you guys using.

Piotr Glejzer staff commented 6 years ago

Yes, checkboxes and labels should be shown. We have a bug and that fix what I send before is fixing this bug. We are globally will fix in next week. Website looks bad because it is using the newest version of MDB Pro so If we have a bug in our code it is showing also on our website.

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 jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes