Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Input > RadNumericTextBox skin

• Ayelet

  Posted on Dec 30, 2007 (permalink)

  Hi,
  
  I want to use RadNumericTextBox control, but I want
  it to look like asp:TextBox.
  How can I do it? Do you have skin for it or something else?
  
  Thanks.

• Shinu MVP

  Posted on Dec 31, 2007 (permalink)

  Hi ,
  
  Try setting the Skin="None" in the aspx as shown below.
  
  ASPX:
  

  <radI:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Skin="None">

  </radI:RadNumericTextBox>

  
  
  Thanks
  Shinu.
  

• Ayelet

  Posted on Jan 2, 2008 (permalink)

  Thanks for the answer.
  
  The control does look like asp:TextBox, but the right border
  of the textbox is cut (not visible).
  How can I fix it?
  

• Konstantin Petkov Konstantin Petkov

  Posted on Jan 2, 2008 (permalink)

  Hello batsheva,
  
  The issue you describe may appear in case of additional styling (.css) which would not appear if you set Skin="None". Can you please double-check there is no skin set (having no Skin property setting means you use the default skin)?
  
  If that does not help, please post a sample markup along with more details like the browser you check this on. Is this browser-related problem?
  
  Kind regards,
  Konstantin Petkov
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Ayelet

  Posted on Jan 2, 2008 (permalink)

  There is no additional styling (.css), I checked this problem in firefox and IE7.
  The problem happens only in IE7, in firefox it looks ok.

• Sebastian Sebastian

  Posted on Jan 3, 2008 (permalink)

  Hi batsheva,
  
  This topic from the online documentation of RadInput can help you eliminate the visual discrepancy you encountered:
  
  http://www.telerik.com/help/aspnet/input/?UsingSkin%20.html (paragraph Not Skinned Input (Skin="None"))
  
  Below is a quote from the article:
  
  When the input control is not skinned its styling classes are rendered without the postfix "_[SkinName]". By default (when not skinned) the input element is rendered with border 2px and padding 1px. When it has set width 100% and is nested in a table cell (which comes from the new rendering mechanism) you should set padding-right to be twice (first for the left and second for the right side of the input) the border and the padding size (i.e. 6px) in order to avoid cutting the right border of the input when it has empty skin set (Skin="None") in IE.
  
  Best regards,
  Stephen
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Mike Bridge Intermediate

  Posted on Mar 7, 2008 (permalink)

  Hi-
  
  I set the Skin="None" on the RadNumericTextBox, but I lose the images on the spinner icons---they say "Spin Up" and "Spin Down".  How can I use the default style for the input box but use some images for the spin up and spin-down box?
  
  Thanks,
  
  -Mike

• Sebastian Sebastian

  Posted on Mar 10, 2008 (permalink)

  Hello Mike,
  
  To display the spin button images with disabled skin for RadNumericTextBox, simply define .up and .down classes for the buttons in the head section of the page or through an external css file. See the example in the attached project for more info.
  
  Best regards,
  Stephen
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

  Attached files

  • RadInput2xNET2VB.zip

• Mike Bridge Intermediate

  Posted on Mar 10, 2008 (permalink)

  Great, thanks!
  

• Mike Bridge Intermediate

  Posted on Mar 10, 2008 (permalink)

  Hi-
  
  Sorry, one more question.  I tried to change the class names "up" and "down" to something a little less generic and then tried to access these via the "SpinUpCssClass" and "SpinDownCssClass" property, but they doesn't seem to have any effect, e.g. :
  
  

  <style type="text/css">

  .radspinnerup

  {

  display: block;

  padding:0 0 0 5px;

  text-indent: -9999px;

  width: 16px;

  height: 8px;

  line-height: 8px;

  background: transparent url('../Images/rad_spin_button_sprites.gif') no-repeat;

  font-size:1px;

  position:relative;/*FF*/

  z-index:2;/*Opera*/

  _position:static;/*IE*/

  outline:none;/*FF*/

  background-position: center 1px;

  }

  .radspinnerdown

  {

  display: block;

  padding:0 0 0 5px;

  text-indent: -9999px;

  width: 16px;

  height: 8px;

  line-height: 8px;

  background: transparent url('../Images/rad_spin_button_sprites.gif') no-repeat;

  font-size:1px;

  position:relative;/*FF*/

  z-index:2;/*Opera*/

  _position:static;/*IE*/

  outline:none;/*FF*/

  background-position: center -7px;

  }

  </style>

  <radi:RadNumericTextBox

  ID="nbSublists"

  runat="server"

  MaxValue="200"

  MinValue="0"

  Type="Number"

  ShowSpinButtons="true"

  SpinDownCssClass="radspinnerdown"

  SpinUpCssClass="radspinnerup"

  Width="100px"

  >

  <NumberFormat DecimalDigits="0" />

  </radi:RadNumericTextBox>

  
  Did I miss something, or are those attributes not working quite right?  (The class names don't show up in the generated code.)
  
  Thanks!
  
  -Mike
  
  

• Dimo Dimo

  Posted on Mar 11, 2008 (permalink)

  Hi Mike,
  
  Indeed, there seems to be a problem with applying the specified CSS classes. We have logged this issue in our bug-tracking system. Thank you for bringing this to our attention. Your Telerik points have been updated.
  
  In order to avoid using too generic CSS selectors (.up and .down) you can currently use something like this:
  
  
  .radInput_Default  .spinImgCell  a   /*common styles for both arrows*/
  {
      .......
  }
  
  .radInput_Default  .up
  {
       .......
  }
  
  .radInput_Default  .down
  {
      ..........
  }
  
  
  
  All the best,
  Dimo
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Frank -

  Posted on Apr 13, 2011 (permalink)

  Similar issue for me with images as spinbuttons, can anyone help me out:
  
  http://www.telerik.com/community/forums/aspnet/input/adding-image-to-spinupbutton-in-radnumerictextbox.aspx
  

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Input > RadNumericTextBox skin