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:-
And the css that defines the sidebar is:-
I'm assuming something in the css is causing the issue - but can't work out what.
Thanks
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.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
transition:
all
0.5
s 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.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
transition:
all
0.5
s 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