This is a migrated thread and some comments may be shown as answers.

Dropdownlist Styling

12 Answers 1673 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Man
Top achievements
Rank 1
Man asked on 11 Oct 2015, 09:19 PM

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

Sort by
0
Iliana Nikolova
Telerik team
answered on 13 Oct 2015, 03:43 PM
Hi Manav,

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

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 14 Oct 2015, 08:53 AM
PFA
0
Iliana Nikolova
Telerik team
answered on 16 Oct 2015, 07:49 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 16 Oct 2015, 03:11 PM

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

 

0
Iliana Nikolova
Telerik team
answered on 20 Oct 2015, 11:07 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 20 Oct 2015, 11:12 AM

Hi Iliana,

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

0
Iliana Nikolova
Telerik team
answered on 22 Oct 2015, 08:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 23 Oct 2015, 08:10 AM

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

0
Accepted
Iliana Nikolova
Telerik team
answered on 27 Oct 2015, 07:59 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 27 Oct 2015, 08:29 AM

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? 

0
Iliana Nikolova
Telerik team
answered on 29 Oct 2015, 08:51 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 29 Oct 2015, 10:32 AM

Hi Iliana,

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

Tags
DropDownList
Asked by
Man
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Man
Top achievements
Rank 1
Share this question
or