Flatten Input Appearance

5 posts, 2 answers
  1. Brian
    Brian avatar
    13 posts
    Member since:
    May 2013

    Posted 07 Jun 2013 Link to this post

    I have some inputs (mainly radnumerictextbox), on a portion of my page with a blue background. I would like the textbox area to be white with no borders.  I can do this with regular textboxes, but I have not been able to completely get rid of the border on the rad controls.

    Any help would be appreciated!
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2013 Link to this post

    Hi,

    To change the background and border please try the following CSS.

    CSS:
    .RadInput_Default .riTextBox, html body .RadInputMgr_Default
     {
         background:blue !important;
         border:0px !important;
     }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brian
    Brian avatar
    13 posts
    Member since:
    May 2013

    Posted 10 Jun 2013 Link to this post

    Hi Shinu,

    Thank you.  That worked.

    On a very related question, when I look at the markup that has been output to the browser, I do not see the name of the skin I applied to the control.

    <telerik:RadNumericTextBox runat="server" ID="WidthTextBox" CssClass="riLeftTextBox" SkinID="SST_Touch" />
    <telerik:RadNumericTextBox runat="server" ID="HeightTextBox" CssClass="FilterTextBoxRight" SkinID="SST_Touch" />

    comes out as

    <span id="filterTabContainer_ConfigurationTab_WidthTextBox_wrapper" class="riSingle RadInput RadInput_Default" style="width:160px;"><input id="filterTabContainer_ConfigurationTab_WidthTextBox" name="filterTabContainer$ConfigurationTab$WidthTextBox" class="riTextBox riEnabled riLeftTextBox" value="24.00" type="text" /><input id="filterTabContainer_ConfigurationTab_WidthTextBox_ClientState" name="filterTabContainer_ConfigurationTab_WidthTextBox_ClientState" type="hidden" /></span>
    <span id="filterTabContainer_ConfigurationTab_HeightTextBox_wrapper" class="riSingle RadInput RadInput_Default" style="width:160px;"><input id="filterTabContainer_ConfigurationTab_HeightTextBox" name="filterTabContainer$ConfigurationTab$HeightTextBox" class="riTextBox riEnabled FilterTextBoxRight" value="24.00" type="text" /><input id="filterTabContainer_ConfigurationTab_HeightTextBox_ClientState" name="filterTabContainer_ConfigurationTab_HeightTextBox_ClientState" type="hidden" /></span>

    Note that the skin id is nowhere to be found in the final markup.  Can anyone tell me why this is the case?
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Jun 2013 Link to this post

    Hi,

    I suppose you need to add custom skin for the RadNumericTextBox, so you can set EnableEmbeddedSkins as false and set skin name as follows.
    ASPX:
    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Skin="Green" EnableEmbeddedSkins="false">
    </telerik:RadNumericTextBox>


    Thanks,
    Shinu.

  6. Brian
    Brian avatar
    13 posts
    Member since:
    May 2013

    Posted 12 Jun 2013 Link to this post

    Thank you.  That worked.  I was using SkinID at that point, but I guess it needed to be Skin.  That part is confusing to me, but I got it to work, so I am happy.  Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017