My dropdownlist seems to have a lot of padding inside. When the optional value is displayed, it corresponds to the proper width from the CSS, However, when a value is selected, it expands itself to a lot more than the actual content length. Please see attached document
Also, how do i have a fixed width of the dropdown when it is not selected, but when the user clicks to open the list, the dropped list is expanded
12 Answers, 1 is accepted
The provided archive is empty - could you please send your example again? Thank you in advance.
Regards,
Iliana Nikolova
Telerik
The provided image is not enough in order to determine what causes the issue. Could you please provide a dojo which demonstrates your exact setup - this way I would be able to check what exactly is going wrong and provide concrete recommendations?
Regarding the second question, you could set to the list element. For your convenience here is a basic example.
Regards,
Iliana Nikolova
Telerik
![](/forums/images/avatarimages/default.gif)
Hi,
My View code is
<table class="table table-hover">
<tr>
<div class="form-group">
<td class="control-label">
@Html.LabelFor(project => project.TeamExperience)
</td>
<td class="editor-field">
@(Html.Kendo().DropDownListFor(project => project.TeamExperience)
.HtmlAttributes(new { @class = "k-dropdown" })
.BindTo(Model.TeamExperienceList)
.DataTextField("Text")
.DataValueField("Value")
.SelectedIndex(Model.TeamExperience)
.OptionLabel("Please Select"))
</td>
</div>
<div class="form-group">
<td class="control-label">
@Html.LabelFor(project => project.TeamExperienceNotes)
</td>
<td class="editor-field">
@Html.TextAreaFor(project => project.TeamExperienceNotes, new { @class = "txtAreaStyle" })
</td>
</div>
</tr>​
</table>
The values in the table are
Currently working with Client / familiar with processes
Previously worked with client / aware of processes
No experience of working with Client
When no value is selected, the dropdown width is much lesser than when a value is selected. Also, when the dropdown list opens up, the text is still wrapped up.
In other words, when a value is selected, the dropdown stretches itself a bit more thereby compressing the other columns on the page.
On a separate note, the option of setting the width does not work either as it says .list is not recognised
I am not able to reproduce the illustrated issue using the provided code snippet (short screencast capture). However, I believe the issue is styling related - most probably there is some custom CSS rule which influence the default Kendo UI DropDownList rendering. Could you please check this suggestion?
Regarding the wrapped text, you could avoid this outcome as setting white-space: to the .k-list-container:
.k-list-container {
white-space
:
nowrap
;
}
Regards,
Iliana Nikolova
Telerik
![](/forums/images/avatarimages/default.gif)
Hi Iliana,
Many thanks. That helps. However, it now shows a vertical scroll bar. Is this the expected behaviour?
Setting white-space: to the .k-list-container element should not cause a vertical scrollbar, however without reproducing the issue locally I cannot say what the reason for it is. Please provide an isolated runnable example which demonstrates your exact setup - this way I would be able to advise you further. Thank you in advance for your cooperation.
Regards,
Iliana Nikolova
Telerik
![](/forums/images/avatarimages/default.gif)
Hi Iliana,
I found the issue for the scroll bar. My Css contains
.k-input {
width: 50%;
}
for textboxes and
.k-dropdown{
width: 50%;
}
for the dropdown hence both these factors together caused the issue due to conflict. ​
I am glad to hear you have found the reason for the issue. Can I consider this case resolved?
Regards,
Iliana Nikolova
Telerik
![](/forums/images/avatarimages/default.gif)
Hi Iliana
Just wanted to check is there a way to control the k-input (textbox and numeric textbox) and the k-list (dropdown) in different ways apart from giving every control group a different class name?
You could set different class name to each Kendo UI DropDownList using additional JavaScript and use this class name in the CSS selectors. Take a look at the updated dojo.
Regards,
Iliana Nikolova
Telerik
![](/forums/images/avatarimages/default.gif)
Hi Iliana,
Yes. Thats what I thought. Many thanks for your help