Unwanted border

4 posts, 1 answers
  1. Tayger
    Tayger avatar
    157 posts
    Member since:
    Jan 2015

    Posted 24 Mar Link to this post

    Hello

    I recently updated to KendoUI 2018.1.221 and have to do some adjustments now. It looks like that the kendoMaskedTextBox is acting different now and I can't find a (proper) solution for this problem to fix it: There is always a rounded border as soon as I put a kendoMaskedTextBox on a input. I have prepared a simple example or you can use this code to show you the effect:

    <!DOCTYPE html>
    <html lang="en">
     
        <head>
            <meta charset="UTF-8">
     
            <!-- Telerik Framework -->
            <link href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
            <link href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css" rel="stylesheet" />
     
            <script src="http://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
            <script src="http://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
     
            <script>
                $(document).ready(function() {
                    $("#starttime").kendoMaskedTextBox({
                        mask: 'h0:t0:t0',
                        rules: { 'h': /[0-2]/, 't': /[0-5]/ }
                    });
                });
     
            </script>
     
        </head>
     
        <body style="background-color: #f1f1f1">
            <div>
                <input id="starttime" style="border:1px solid blue;">
            </div>
        </body>
    </html>

     

    As you can see there are two borders:
    The inner one seems to be set by the widget.
    The outer one is set by me (style). I don't know why that widget puts a border by default (that I don't want). The widget should only mask the input and not style it, imho.

    I've checked all your samples on the API page of MaskedTextBox and they all have rounded corners. 

    How do I get rid of that rounded border inside the input?

    Regards

  2. Answer
    Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 27 Mar Link to this post

    Hi,

    The styles applied inline to the input you initialize the MaskedTextBox from are copied to the wrapper and the input inside the widget itself. We suggest styling the elements separately to avoid this behavior.

    In answer to your question, the rounded corners are applied to that same input element inside the widget. To remove it, you can add the following CSS rule to your styles:
    .k-maskedtextbox .k-textbox {
        border-radius: 0;
    }

    You can see both styling the widget border and removing the rounded corners demonstrated in the following dojo: http://dojo.telerik.com/oPIWaHEB

    I hope this helps.


    Regards,
    Orlin
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tayger
    Tayger avatar
    157 posts
    Member since:
    Jan 2015

    Posted 02 Apr in reply to Orlin Link to this post

    Hi Orlin

    Thank you for your answer! I could make it working with your workaround. 

    I'm a bit confused about "We suggest styling the elements separately to avoid this behavior."
    -> I agree but I haven't styled it before. This border must come from the widget itself. You also can see it in all the examples of the official documentation and those are neither styled before. So I don't know where/how they should have been styled before.

  4. Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 03 Apr Link to this post

    Hello,

    You are correct, the border does come from the widget itself. Overriding the default styling depends on the widget but it is advisable to not apply the styling inline, as there is the potential for unwanted side effects, as in the above case.

    I hope this answers your question.


    Regards,
    Orlin
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top