Missing Down Arrow

3 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 18 Mar 2015 Link to this post

    I have a drop-down list in a collapsible sidebar (defined using css). When placed in the sidebar, the down arrow on the control doesn't show, no matter what the width of the control is set to.

    The code is:-

    <div id="sidebar-wrapper">
           <ul class="sidebar-nav">
               <li class="sidebar-brand">
                   <img src="@Url.Content("~/Content/Images/Trust_Logo.png")" />
               </li>
     
               <li style="margin-top:40px;">
                   <span style="font-size:x-small">Division</span>
                   @(Html.Kendo().DropDownList()
                   .Name("ddlDivsion")
                   .DataValueField("Code")
                   .DataTextField("Description")
                   .Events(e => e.Change("onChange"))
                           .HtmlAttributes(new { style = "width:80px; font-size:x-small;" })
                   .DataSource(src => src.Read(rd => rd.Action("GetDivisions", "Division")))
     
                   )
    </li>
    </ul>
    </div>

    And the css that defines the sidebar is:-

    #wrapper {
        padding-left: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
     
    #wrapper.toggled {
        padding-left: 150px;
    }
     
    #sidebar-wrapper {
        z-index: 1000;
        position: fixed;
        left: 150px;
        width: 0;
        height: 100%;
        margin-left: -150px;
        overflow-y: auto;
        background: #C9F2F8;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
     
    #wrapper.toggled #sidebar-wrapper {
        width: 150px;
    }
     
    #page-content-wrapper {
        width: 100%;
        position: absolute;
        padding: 15px;
    }
     
    #wrapper.toggled #page-content-wrapper {
        position: absolute;
        margin-right: -150px;
    }
     
    /* Sidebar Styles */
     
    .sidebar-nav {
        position: absolute;
        top: 0;
        width: 150px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
     
    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
        margin-top:10px;
    }
     
    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #0483AA
    }
     
    .sidebar-nav li a:hover {
        text-decoration: none;
        color: darkblue;
        background: rgba(255,255,255,0.2);
    }
     
    .sidebar-nav li a:active,
    .sidebar-nav li a:focus {
        text-decoration: none;
    }
     
    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
    }
     
    .sidebar-nav > .sidebar-brand a {
        color: #999999;
    }
     
    .sidebar-nav > .sidebar-brand a:hover {
        color: #fff;
        background: none;
    }
     
    @media(min-width:768px) {
        #wrapper {
            padding-left: 150px;
        }
     
        #wrapper.toggled {
            padding-left: 0;
        }
     
        #sidebar-wrapper {
            width: 150px;
        }
     
        #wrapper.toggled #sidebar-wrapper {
            width: 0;
        }
     
        #page-content-wrapper {
            padding: 20px;
            position: relative;
        }
     
        #wrapper.toggled #page-content-wrapper {
            position: relative;
            margin-right: 0;
        }
    }

    I'm assuming something in the css is causing the issue - but can't work out what.

    Thanks
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 20 Mar 2015 Link to this post

    Hi Andrew,

    The following CSS rule should help to achieve the expected result: 
    .k-dropdown-wrap .k-select {
        width: 3.9em;
    }


    Regards,
    Iliana Nikolova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

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

    That's worked.

    Thanks
Back to Top