We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DropDownList CSS custom styling

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

3 Replies

PO Prince Oliver Syncfusion Team February 27, 2017 09:18 AM UTC

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   



JM Jan Maticka February 28, 2017 02:38 PM UTC

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


PO Prince Oliver Syncfusion Team March 1, 2017 04:41 AM UTC

Hi Jan, 

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

Regards, 
Prince 


Loader.
Up arrow icon