Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Duplicated
Last Updated: 17 Mar 2020 18:43 by ADMIN
Nicola
Created on: 14 Mar 2020 10:24
Category: UI for Blazor
Type: Bug Report
2
Width of control fixed to 300px does not respect Bootstrap style

Hi,

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

 

 

 

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
Dropdown components to calculate their dropdown element width to match the actual width of the component in px when PopupWidth is not set
3 comments
ADMIN
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.

Regards,
Svetoslav Dimitrov
Progress Telerik

 UI for Blazor
Nicola
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.

ben
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"
                         OnRead="@ReadItems"
                         Filterable="true"
                         Placeholder="Find what you seek by typing"
                         @bind-Value="@SelectedValue"
                         TextField="Name"
                         ValueField="Id"
                         class="form-control" id="test"
                         >
        </TelerikComboBox>
    </div>

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

Attached Files:
Create an account Log In
View
Type
Status
Category