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

Unwanted border

3 Answers 159 Views
MaskedTextBox
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 24 Mar 2018, 07:26 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Orlin
Telerik team
answered on 27 Mar 2018, 05:38 AM
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.
0
Tayger
Top achievements
Rank 1
Iron
answered on 02 Apr 2018, 01:02 PM

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.

0
Orlin
Telerik team
answered on 03 Apr 2018, 05:34 AM
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.
Tags
MaskedTextBox
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Orlin
Telerik team
Tayger
Top achievements
Rank 1
Iron
Share this question
or