Dropdownlist Styling

13 posts, 1 answers
  1. Man
    Man avatar
    48 posts
    Member since:
    Sep 2015

    Posted 11 Oct 2015 Link to this post

    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

     

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 13 Oct 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Man
    Man avatar
    48 posts
    Member since:
    Sep 2015

    Posted 14 Oct 2015 in reply to Iliana Nikolova Link to this post

    PFA
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 16 Oct 2015 Link to this post

    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 width 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!
     
  6. Man
    Man avatar
    48 posts
    Member since:
    Sep 2015

    Posted 16 Oct 2015 in reply to Iliana Nikolova Link to this post

    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

     

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 20 Oct 2015 Link to this post

    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: nowrap 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!
     
  8. Man
    Man avatar
    48 posts
    Member since:
    Sep 2015

    Posted 20 Oct 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

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

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 22 Oct 2015 Link to this post

    Hi Manav,

    Setting white-space: nowrap 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!
     
  10. Man
    Man avatar
    48 posts
    Member since:
    Sep 2015

    Posted 23 Oct 2015 in reply to Iliana Nikolova Link to this post

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

  11. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 27 Oct 2015 Link to this post

    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!
     
  12. Man
    Man avatar
    48 posts
    Member since:
    Sep 2015

    Posted 27 Oct 2015 in reply to Iliana Nikolova Link to this post

    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? 

  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 29 Oct 2015 Link to this post

    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!
     
  14. Man
    Man avatar
    48 posts
    Member since:
    Sep 2015

    Posted 29 Oct 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

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

Back to Top
Kendo UI is VS 2017 Ready