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

input text without clear button

1 Answer 244 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Kai-Uwe
Top achievements
Rank 1
Kai-Uwe asked on 27 May 2016, 12:41 PM

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

Sort by
0
Stefan
Telerik team
answered on 31 May 2016, 01:11 PM
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!
Tags
PanelBar
Asked by
Kai-Uwe
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or