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

Missing Down Arrow

2 Answers 980 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 18 Mar 2015, 09:07 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 20 Mar 2015, 09:02 AM
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.

 
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 20 Mar 2015, 09:07 AM
That's worked.

Thanks
Tags
DropDownList
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Iliana Nikolova
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or