DropDownList CSS custom styling

[Jan Maticka]

Hello,

I found out a problem with styling DropDownList component. I have done it exactly the same as it is in the example but it looks really different in compare to other components on the page. I am using bootstrap for styling. In attached files there are screens of the whole page, wrong style of DropDownList component and the style of select in the way I would like to have, where you can see the problem. Could you please help me with the issue?

HTML Template code:

//selects with bootstrap style

          <div class="row">

            <div class="col-lg-6">

                <div class="form-group">

                    <label class="control-label">Auto:</label>

                    <select class="form-control" ng-options="car.value as car.plateNumber for car in vm.cars" ng-model="vm.ride.car.carId"></select>

                </div>

            </div>

            <div class="col-lg-6">

                <div class="form-group">

                    <label class="control-label">Přívěs:</label>

                    <select class="form-control" ng-options="trailer.value as trailer.plateNumber for trailer in vm.trailers" ng-model="vm.ride.trailer.trailerId"></select>

                </div>

            </div>

        </div>

//DropDownList with exactly the same class as it is above but it does not apply

        <div class="row">

            <div class="col-lg-12">

                <div class="form-group">

                    <label class="control-label">Řidič:</label>

                    <select class="form-control"

                            ej-dropdownlist

                            id="dropdownDrivers"

                            e-datasource="vm.drivers" 

                            e-fields="vm.driverFields" 

                            e-change="vm.changeDriverSelection"

                            e-showcheckbox=true 

                            e-multiselectmode="vm.multiSelect" 

                            e-watermarktext="vm.driverWatermarkText" 

                            e-width="vm.width"></select>

                </div>

            </div>

        </div>

Attachment: screens_9bf2490d.rar

[Prince Oliver]

Hi Jan,   

  

Thanks for contacting Syncfusion support.   

  

From the shared screenshot, we can know that you have used form- control bootstrap class on default select element. To use bootstrap theme in our controls you need to include ej.bootstrap.min.css file in your head section.   

  

Refer to the following UG Documentation for more information: https://help.syncfusion.com/js/bootstraptheme 

  

In order add a class to our control, we need to use the cssClass property instead of directly adding a class attribute.   

  

Refer to the Documentation link for more information: https://help.syncfusion.com/api/js/ejdropdownlist#members:cssclass 

   

Refer to the following Demo sample: http://jsplayground.syncfusion.com/kpsmdqci 

    

Regards,   

Prince   

[Jan Maticka]

Hello Prince,

Thank you very much for your support, it works perfect. I should have found it in documentation, but I just did not.

Kind regards

Jan

[Prince Oliver]

Hi Jan, 

Most Welcome. We are glad that your issue is resolved. 

Regards, 

Prince