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:

    <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>

  2. Stefan
    Admin
    Stefan avatar
    270 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:

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top