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.
Unfortunately, activation email could not send to your email. Please try again.

DropDownList CSS custom styling

Thread ID:

Created:

Updated:

Platform:

Replies:

129071 Feb 24,2017 07:47 AM Feb 28,2017 11:41 PM JavaScript 3
loading
Tags: ejDropDownList
Jan Maticka
Asked On February 24, 2017 07:47 AM

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 [Syncfusion]
Replied On February 27, 2017 04:18 AM

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
Replied On February 28, 2017 09:38 AM

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 [Syncfusion]
Replied On February 28, 2017 11:41 PM

Hi Jan, 

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

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;