input text without clear button

2 posts, 0 answers
  1. Kai-Uwe
    Kai-Uwe avatar
    12 posts
    Member since:
    Jun 2012

    Posted 27 May Link to this post

    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:

        .k-widget input[type=text]::-ms-clear {
          height: 15px;


    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>
        <base href="">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <link rel="stylesheet" href="//" />
        <link rel="stylesheet" href="//" />
        <script src="//"></script>
        <script src="//"></script>
            <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 class="teamMate">
                                <img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
                                <h2>Nancy Leverling</h2>
                                <p>Sales Associate</p>
                            <div class="teamMate">
                                <img src="../content/web/panelbar/robert.jpg" alt="Robert King">
                                <h2>Robert King</h2>
                                <p>Business System Analyst</p>
                            <li>New Business Plan</li>
                                Sales Forecasts
                                    <li>Q1 Forecast</li>
                                    <li>Q2 Forecast</li>
                                    <li>Q3 Forecast</li>
                                    <li>Q4 Forecast</li>
                            <li>Sales Reports</li>
                    <li disabled="disabled">
                    #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%;
                    $(document).ready(function() {
                            expandMode: "single"


  2. Stefan
    Stefan avatar
    195 posts

    Posted 31 May Link to this post

    Hello Kai-Uwe,

    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:'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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top