Dropdownlist Styling

[Man]

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

 

 

[Iliana Dyankova]

Hi Manav,

The provided archive is empty - could you please send your example again? Thank you in advance.

Regards,
Iliana Nikolova
Telerik

 

 

[Man]

PFA

[Iliana Dyankova]

Hi Manav,

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

 

 

[Man]

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

 

[Iliana Dyankova]

Hi Manav,

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

 

 

[Man]

Hi Iliana,

   Many thanks. That helps. However, it now shows a vertical scroll bar. Is this the expected behaviour?

[Iliana Dyankova]

Hi Manav,

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

 

 

[Man]

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. ​

[Iliana Dyankova]

Hi Man,

I am glad to hear you have found the reason for the issue. Can I consider this case resolved?

Regards,
Iliana Nikolova
Telerik

 

 

[Man]

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? 

[Iliana Dyankova]

Hi Manav,

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

 

 

[Man]

Hi Iliana,

   Yes. Thats what I thought. Many thanks for your help