Last Updated: 17 Mar 2020 18:43 by ADMIN
Created on: 14 Mar 2020 10:24
Category: UI for Blazor
Type: Bug Report
Width of control fixed to 300px does not respect Bootstrap style


the Blazor form controls like DropDownList & ComboBox have a fixed width of 300px (why ???).

This does not respect the Boostrap 4 style guidelines and in a <form> looks like:

where the "Currency" field is a standard <select> and "Model Reader Engine" is a <TelerikDropDownList>.

If I try to set the "Width" attribute of the DropDownList to "100%" the result is:


but if I try to open the DropDown the element list is large as the entire screen:


Have you planned a fix for this ?


Thanks in advance




This item is a duplicate of an already existing item. You can find the original item here:
Svetoslav Dimitrov
Posted on: 17 Mar 2020 18:43

Hello Nicola and Ben,

Thank you both for sharing your experience and knowledge on the topic!

To answer each question in turn.

We have used default values on our Blazor input components because the standard input elements also have a default width.

There is an open Feature Request which will solve the problem when setting the width to 100% makes the dropdown width inadequate. You can see it from this link: https://feedback.telerik.com/blazor/1440092-dropdown-components-to-calculate-their-dropdown-element-width-to-match-the-actual-width-of-the-component-in-px-when-popupwidth-is-not-set. I have given both your Votes for it. You can Follow it for status updates. This is the second reason why we have a default width. 

To achieve Bootstrap-alike behavior you need to apply the corresponding class - in this case - .form-control to the Telerik component. The default width we have will be removed when the feature abive is implemented, which will also enable the .form-control class to expand dropdowns to 100%. At the momoent, you can add Width="" to them to remove the default width so having Class="form-control" will expand them.

Svetoslav Dimitrov
Progress Telerik

 UI for Blazor
Posted on: 15 Mar 2020 11:43

Hi Ben, hi all!

I've found a good solution for me with bootstrap forms:

  1. set width of component to "inherit"
    <TelerikComboBox Width="inherit" .... />
  2. add this to site.css (or your custom css file)
    .k-widget.form-control { width: 100% !important; }


Now the combo box respects bootstrap guidelines and the popup with data is acceptable for me.

Posted on: 15 Mar 2020 11:22

Just ran into this, tried to put my Combobox in a form

<div class="form-group">
        <label for="test">Combobox</label>
        <TelerikComboBox Data="@Dtos"
                         Placeholder="Find what you seek by typing"
                         class="form-control" id="test"

And it looks a bit silly with all of my other Bootstrap 4 form controls.  Hoping this is an easy one to fix!