Combobox Css

I am having a hard time setting css for combobox. I am using some custom css and mine looks like the below. I would like the combo to look the the demos, basically a bootstrap combo, but everything I have tried using the styles from the demo has not changed it. Any help would be appreciated.

                                    <div class='col-4'>
                                        <div class="control_wrapper">
                                            <SfComboBox TValue="int?" TItem="BrokerageFirms" DataSource="@brokeragefirms" Value="riaemployeebrokerageaccounts.BrokerID">
                                                <ComboBoxFieldSettings Text="BrokerageName" Value="BrokerID"></ComboBoxFieldSettings>
                                                <ComboBoxEvents TValue="int?" TItem="BrokerageFirms"></ComboBoxEvents>
                                            </SfComboBox>
                                        </div>
                                        </div>

Mine is displaying like this




3 Replies 1 reply marked as answer

BC Berly Christopher Syncfusion Team November 17, 2020 11:34 AM UTC

Hi Slynch, 
  
Greetings from Syncfusion support. 
  
We can render the ComboBox component in bootstrap style with help of using bootstrap CDN link mentioned below. 
  
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/bootstrap4.css" rel="stylesheet" /> 
 
(OR) 
 
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/bootstrap.css" rel="stylesheet" /> 

  
Please find the sample by rendering the component in bootstrap style below. 
  
  
 
  
  
Regards, 
Berly B.C 


Marked as answer

SL slynch November 17, 2020 02:04 PM UTC

Thank you. I had the following in _Host.cshtml. When I removed fabric and material it worked.

        @*SyncFusion*@
        @*<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" />
        <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />*@
        <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />


BC Berly Christopher Syncfusion Team November 18, 2020 06:39 AM UTC

Hi Stephen, 
  
We are glad to know that your issue is resolved. Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon