RadMaskedTextBox: Setting Width with EnableEmbeddedBaseStylesheet False

[Jeremy]

Hello,

I am attempting to dynamically set the width of a RadMaskedTextBox in codebehind. Everything was working fine until I decided to use custom css styling and set EnableEmbeddedBaseStylesheet="false". Once the property is set I can no longer change the width of the control in any way except through a linked style sheet. Which again doesn't work because I am setting the width dynamically in codebehind. Using the Width="XXpx" property or the Style="width: XXpx;" they are both ignored and the width of the control set to the default value.

Additionally the property EnableEmbeddedBaseStylesheet seems to have some odd behavior. I am setting it at the individual control level, so as a property of an individual RadMaskedTextBox. However if I don't set the property to false for any RadMaskedTextBox on the same page or intentionally set it to True for any one of the controls on the page then they ALL get set to true and the individual controls that have the property set to false are ignored.

Is there some way around this issue? My overall goal is simple: Use custom styling on the RadMaskedTextBox control and be able to dynamically control the width of the control at run time.  Although to be clear setting the width or style properties inline at design time still doesn't work with the EnableEmbeddedBaseStylesheet property set to false.

Thank you,
Jeremy

----- CODE SNIPPET & CORRESPONDING IMAGE FILES -----

<telerik:RadMaskedTextBox ID="RadMaskedTextBox2" runat="server" Text="RadMaskedTextBox2" Mask="aaaaaaaaaaaaaaaaa" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="False" width="80px" />
<br />
<telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Text="RadMaskedTextBox1" Mask="aaaaaaaaaaaaaaaaa" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" />

See Image1.png for rendered results

<telerik:RadMaskedTextBox ID="RadMaskedTextBox2" runat="server" Text="RadMaskedTextBox2" Mask="aaaaaaaaaaaaaaaaa" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="True" width="80px" />
<br />
<telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Text="RadMaskedTextBox1" Mask="aaaaaaaaaaaaaaaaa" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" />

See Image2.png for rendered results

[Angel Petrov]

Hi Jeremy,

Thank you for contacting us.

When setting EnableEmbeddedBaseStylesheet to false the base styles are prevented from registering. In order to modify the width you should include this CSS in your project:

.RadInput
        {
            display: inline-block;
        }
        html body .riSingle .riTextBox, html body .riSingle .riTextBox[type="text"]
        {
            margin: 0;
            padding-left: 5px;
            padding-right: 5px;
            width: 100%;
        }
        .riSingle, .riLabel, .riSingle .riTextBox, .riSingle .riContentWrapper
        {
            box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-khtml-box-sizing:border-box
        }

Note that when EnableEmbeddedBaseStylesheet is set to true for one of the input controls it will also be set to true for the rest as this is a default browser behavior.

All the best,
Angel Petrov
the Telerik team

[Jeremy]

Angel,

Thank you very much for your help. Your suggestion led me to the solution. In my case I had already defined much of how I wanted a textbox to be stylized using the base input[type="text"] in my css file. Once I set EnableEmbeddedBaseStylesheet to false it was ignoring much of that information as well as the width option. Using the CSS you included all I had to add my my file was the following:

.RadInput
{
    display: inline-block;
}

html body .riSingle .riTextBox[type="text"]
{
    width: 100%;
}

After adding this to my CSS file the inputs picked up styling in the base input and everything fell into place.

Thank you,
Jeremy