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
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
Rank 1
Iron
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.
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