Kendo Window > textbox styling in IE11

3 posts, 1 answers
  1. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 06 May 2015 Link to this post

    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>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
            <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="" title="About Alvar Aalto"></a></p>
                <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>
                    $(document).ready(function() {
                        var window = $("#window"),
                            undo = $("#undo")
                                    .bind("click", function() {
                        var onClose = function() {
                        if (!"kendoWindow")) {
                                width: "600px",
                                title: "About Alvar Aalto",
                                actions: [
                                close: onClose
                    #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;

  2. Answer
    Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 08 May 2015 Link to this post

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


    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 08 May 2015 in reply to Iliana Nikolova Link to this post

    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 {
    html.k-ie .hackBoxesForIe input[type='text'] {
    border:1px solid #707070;}
Back to Top