If you’ve spent much time visiting “web 2.0” sites, you know that large font sizes are totally “in vogue” for data entry forms. Not only are they easy for all audiences to read, but they also imply a certain level of simplicity on a website. In fact, there are even some UX experts suggesting larger font sizes are better now that high-resolution monitors are the norm and not the exception.

If you’ve got a “beautifully designed” web 2.0-style site, though, and you’re working with RadInput, you know that the default skins “force” their own font size. What do you do if you want the powerful real-time input validation of RadInput and your big web 2.0 fonts?

Fortunately, the problem is easy to solve with a very slightly customized RadInput skin (which is available at the bottom of this post). Essentially, the custom skin just removes the CSS “font-size” declarations from the RadInput Default skin, enabling your RadInput controls (which includes textboxes configured with RadInputManager) to inherit the font-size from your site’s main CSS definition. The effect transforms a form with RadInput from this:

RadInputBigFonts_default 

To a form with RadInput’s inheriting the larger page font size:

RadInputBigFonts_big

 

Now you can take advantage of all the power RadInput and RadInputManager provide without disrupting your “web 2.0” look and feel. To use the custom skin (again, provided below), you simply need to follow these steps:

  • Copy the “Input.Basic.css” and “Input” folder in the attached ZIP to your App_Themes folder
  • Make sure your page is configured to use the Theme containing your custom skin (via the Page-level Theme property)
  • On your RadInput or RadInputManager controls, set EnabledEmbeddedSkins to False and set the Skin property to “Basic

And that’s it! I hope you enjoy the custom skin and I hope this helps those of you working with “web 2.0” designs better leverage RadInput.

Download custom skin “Basic” for RadInput


About the Author

Todd Anglin

is an avid HTML5, CSS3, and JavaScript advocate, and geek about all things web development. He is an active speaker and author, helping developers around the world learn and adopt HTML5. Todd works for Telerik as VP of HTML5 Web & Mobile Tools, where his current technical focus is on Kendo UI. Todd is @toddanglin on Twitter

Related Posts

Comments

Comments are disabled in preview mode.