When I place a TextBox into a panelbar the IE clear button is not visible. It is related with the k-widget class of the ul element.
I can fix it adding:
<style>
.k-widget input[type=text]::-ms-clear {
width:15px;
height: 15px;
}
</style>
Is there any good reason for hiding the clear button in a Panelbar or is it just a bug?
You can reproduce it with the Basic panelbar demo in Dojo:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/panelbar/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<input type="text" value="works" /> <!-- ADDED --> <!-- ADDED --> <!-- ADDED -->
<div id="example">
<ul id="panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
<input type="text" value="works not" /> <!-- ADDED --> <!-- ADDED --> <!-- ADDED -->
</div>
<div class="teamMate">
<img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</li>
<li>
Projects
<ul>
<li>New Business Plan</li>
<li>
Sales Forecasts
<ul>
<li>Q1 Forecast</li>
<li>Q2 Forecast</li>
<li>Q3 Forecast</li>
<li>Q4 Forecast</li>
</ul>
</li>
<li>Sales Reports</li>
</ul>
</li>
<li>
Programs
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
</ul>
</li>
<li disabled="disabled">
Communication
</li>
</ul>
<style>
#panelbar {
max-width: 400px;
margin: 0 auto;
}
.teamMate:after {
content: ".";
display: block;
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
.teamMate h2 {
font-size: 1.4em;
font-weight: normal;
padding-top: 20px;
}
.teamMate p {
margin: 0;
}
.teamMate img {
float: left;
margin: 5px 15px 5px 5px;
border: 1px solid #ccc;
border-radius: 50%;
}
</style>
<script>
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "single"
});
});
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
We remove the proprietary clear button by design. Apart from introducing browser-specific differences in our UI, we have received requests to hide this button in the past. For example:
http://www.telerik.com/forums/override-'x'-clear-button-behavior-on-a-text-box
Your approach to restore the clear button is valid.
Let me know if you need additional assistance.
Regards,
Stefan
Telerik