visualization problem with Bootstrap 4

[seanVonDrake]

hi, I am using for the first time bootstrap-combobox with Bootstrap 4 and I am experiencing a problem (apparently) with CSS, the combobox is rendered as you can see in the attached image file. My HTML code is here:
<div class="col-md-3"><select name="id_citta" class="form-control form-control-sm">[options here...]</select></div>
I am getting the code from the cdnjs:
`

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/js/bootstrap-combobox.min.js"></script>`

please note that the same code is working fine with Bootstrap 3, as you can see in the second image attached.

Any help would be appreciated, many thanks.

[tiesont]

The addon markup and classes have changed between Bootstrap 3 and Bootstrap 4, so at the moment Bootstrap 4 is incompatible. Not sure when you can expect an update.

I will be taking over development at some point, so this is on me, but I'm a bit short of time to work on this at the moment. Sorry.

[jcass77]

#254 might help.

[TusharSD]

Bootstrap 4 Input-groups > .input-group-append will do the job for you

[eddy-lau]

I do this for Bootstrap 4:

$('.combobox').combobox({
        template: function() {
          return '<div class="combobox-container"> <input type="hidden" /><div class="input-group"> <input type="text" autocomplete="off" /><span class="input-group-append input-group-text dropdown-toggle" data-dropdown="dropdown"><span class="caret" /> <span class="glyphicon glyphicon-remove" /></span></div></div>';
        }
});

[seanVonDrake]

hello, any news about this? sorry for bothering, but Bootstrap 4 is becoming a standard now and it would be great to use this wonderful plugin again!

[seanVonDrake]

just in case anyone out there need this, as a dirty workaround I added this to my CSS in order to make the combobox look a little better:

.dropdown-toggle { width: 32px; color: #ffffff; cursor: pointer; background-color: #6c757d; font-size: 1.4em; padding: 0px 6px; padding-top: 4px; border-top-right-radius: .2rem; border-bottom-right-radius: .2rem; }

hope it helps