Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Kendo Window > textbox styling in IE11

2 Answers 147 Views
Window
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 06 May 2015, 03:13 PM

Hi, when I add a textbox to a Kendo Window, the default browser styling of the border (and possibly other things) is no longer present.  See example below I copied from Kendo UI Dojo and run in IE11.  I'm trying to dig through styles to override, but having no luck so far.

 

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
 
        <div id="example">
          <input type="text" placeholder="test"></input>
            <div id="window">
              <input type="text" placeholder="test"></input>
                <div class="armchair"><img src="../content/web/window/armchair-402.png" alt="Artek Alvar Aalto - Armchair 402" /> Artek Alvar Aalto - Armchair 402</div>
                <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
 
                <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>
 
                <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
 
                <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
            </div>
 
            <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>
 
            <script>
                $(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });
 
                    var onClose = function() {
                        undo.show();
                    }
 
                    if (!window.data("kendoWindow")) {
                        window.kendoWindow({
                            width: "600px",
                            title: "About Alvar Aalto",
                            actions: [
                                "Pin",
                                "Minimize",
                                "Maximize",
                                "Close"
                            ],
                            close: onClose
                        });
                    }
                });
            </script>
 
            <style>
 
                #example
                {
                    min-height:500px;
                }
 
                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    padding: 1em;
                    cursor: pointer;
                }
                .armchair {
                    float: left;
                    margin: 30px 30px 120px 30px;
                    text-align: center;
                }
                .armchair img {
                    display: block;
                    margin-bottom: 10px;
                }
            </style>
        </div>
 
 
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 08 May 2015, 02:37 PM

Hi Bob,

The observed outcome is due to the background-clip: border-box rule which is set to .k-widget * elements. Actually the same behavior is observed in IE10 and IE11 outside Kendo UI - just apply background-clip style to plain input / button elements (example). We logged this into the Microsoft feedback portal and it appears this behavior is by design (link). What I would suggest in order to get the same outcome for textbox in Kendo UI Window is to explicitly set border (updated dojo).

Regards,

Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 08 May 2015, 04:30 PM
We ended up adding a custom css class hackBoxesForIe and only apply it to textboxes in Kendow windows when the browser is IE.  Thanks for assistance.

html.k-ie .hackBoxesForIe input[type='text']:hover {
border-color:#26a0da;}
 
html.k-ie .hackBoxesForIe input[type='text'] {
border:1px solid #707070;}
Tags
Window
Asked by
Bob
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Bob
Top achievements
Rank 1
Share this question
or