RadMaskedTextBox: Setting Width with EnableEmbeddedBaseStylesheet False

3 posts, 1 answers
  1. Jeremy
    Jeremy avatar
    4 posts
    Member since:
    Jul 2012

    Posted 03 Jan 2013 Link to this post

    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
  2. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1153 posts

    Posted 08 Jan 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Jeremy
    Jeremy avatar
    4 posts
    Member since:
    Jul 2012

    Posted 08 Jan 2013 Link to this post

    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
Back to Top