Adjust size to Bootstrap's "form-control-sm"

[Henning Krause]

Dear Support-Team, 

I'm trying to combine a Dropdownlist with the inputs from bootstrap. I can not manage to adjust the size of the dropdownlist to be the same as the inputs. Here is my code:

<div class="row align-items-center border-bottom row-striped">
    <div class="col-1">
        <input class="form-control form-control-sm" @bind="@context.txt" />
    </div>
    <div class="col-1">
        <SfDropDownList @bind-Value="@context.bln" TValue="int" TItem="BooleanDDDM" DataSource="@boolModel">
          <DropDownListFieldSettings Value="ID" Text="txt2SPBlnType"></DropDownListFieldSettings>
        </SfDropDownList>
    </div>
    <div class="col-2">
        <input class="form-control form-control-sm" @bind="@context.txtR" />
    </div>
</div>

How do I make the dropdownlist the same size as "form-control form-control-sm"? 

Best 

[Sureshkumar P]

Hi Henning, 

 

We can achieve your requirement by using CssClass property. Please find the code example below. 

<div class="row align-items-center border-bottom row-striped"> 

    <div class="col-1"> 

        <input class="form-control form-control-sm" @bind="@DropVal" /> 

    </div> 

    <div class="col-2"> 

        <SfDropDownList TValue="string" CssClass="form-control-sm" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@DropVal" DataSource="@Country"> 

    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 

</SfDropDownList> 

    </div> 

    <div class="col-2"> 

        <input class="form-control form-control-sm"  /> 

    </div> 

</div> 

 

<style> 

    /*to override the paddig override with basic style*/ 

    .e-ddl.form-control-sm{ 

        padding: 0px; 

    } 

</style> 

 

Regards, 

Sureshkumar P 

[Henning Krause]

Hey  Sureshkumar, 

thanks for your answer. Sadly the provided solution did not work (see image) the dropdown and the inputs still have a different size.

Could you please investigate further?

Best regards, 

Henning

[Sureshkumar P]

Hi Henning, 

 

Based on your shared screen shot, we are unable to reproduce the mentioned problems on our end. Please see the screenshots below to compare the native input element to the Syncfusion dropdownlist. 

Please find the size calculation from our end. 

Syncfusion dropdownliost using form-control-sm (50.5 * 31) 

 

 

Normal input element using form-control-sm (50.5 * 31) 

 

 

Regards, 

Sureshkumar P