Lightweight problems

2 posts, 0 answers
  1. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 25 Apr 2015 Link to this post



    Another Lightweight problem was found in Q1 401 here:

    With the RadNumericTextBox, RadDatePicker, RadTimePicker and the RadDateTimePicker the spin / drop down buttons are over the input area. So, if you type, in the radNumericTextbox, the digits you type are behind the spinbuttons. I was not able to do this with a simple CSS adjustment, because they all use the same classes, not a class for each control (riNumeric for i.e. is not avaiable, it is allways riTextBox)

    I've created a workaround:


    <style type="text/css">
        html body .RadInput input.riEmpty,
        html body .RadInput textarea.riEmpty,
        html body input.RadInput_Empty {
            color: #B8B8CB !important;
        .riContSpinButtons input.riTextBox {
            padding-right: 28px;
        .ppRadDatePicker input.riTextBox,
        .ppRadTimePicker input.riTextBox {
            padding-right: 35px;
        .ppRadDateTimePicker input.riTextBox {
            padding-right: 64px;


    <telerik:RadTextBox ID="RadTextBox1" EmptyMessage="Empty Msg" runat="server" ></telerik:RadTextBox><br /><br />
    <telerik:RadNumericTextBox ID="RadNumericTextBox1" ButtonsPosition="Right" ShowSpinButtons="true" EmptyMessage="Empty Msg" IncrementSettings-Step="2" FocusedStyle-HorizontalAlign="Left" EnabledStyle-HorizontalAlign="Right" EmptyMessageStyle-HorizontalAlign="Right" HoveredStyle-HorizontalAlign="Left" NumberFormat-DecimalDigits="2" runat="server"></telerik:RadNumericTextBox><br /><br />
    <telerik:RadDatePicker ID="RadDatePicker1" DateInput-EmptyMessage="Empty Msg" CssClass="ppRadDatePicker" runat="server"></telerik:RadDatePicker><br /><br />
    <telerik:RadTimePicker ID="RadTimePicker1" DateInput-EmptyMessage="Empty Msg" CssClass="ppRadTimePicker" runat="server"></telerik:RadTimePicker><br /><br />
    <telerik:RadDateTimePicker ID="RadDateTimePicker1" DateInput-EmptyMessage="Empty Msg" CssClass="ppRadDateTimePicker" runat="server"></telerik:RadDateTimePicker><br /><br />

    I want to have the EmptyMessageStyle to have a somewhat smaller font, but when I do this, the control re-sizes to a reduces height and the buttons do not. Look at the attachment image. This is a pretty weird behavior... It would be to great benefit to all if the individual controls have at least 1 css-class for themselves, like riNumericTextBox, riDatePicker, riTimePicker, etc. 

    for now, I do not see how I can accomplish this (smaller font for EmptyMessage)

    NB: skin=silk. 




  2. Galin
    Galin avatar
    526 posts

    Posted 30 Apr 2015 Link to this post

    Hi Erik,

    Indeed the text is hidden behind the buttons, so I will forward this issue to our developers and they will improve the styles. The workaround works as expected, but I suggest you to use relatives units (em) and global CSS rules as following
    .riContSpinButtons input.riTextBox {
        padding-right: 2em;
    .RadPicker input.riTextBox {
        padding-right: 2.5em;
    .RadDateTimePicker input.riTextBox {
        padding-right: 4.5em;

    Regarding the font-size it works as expected, you should set on the wrapper element:
    html .RadInput,
    html .RadPicker {
        font-size: 10px;

    Additionally you can find sample page attached to this post.

    Thank you for the feedback.As a token of gratitude for sharing your feedback find your Telerik points updated.


    See What's Next in App Development. Register for TelerikNEXT.

  3. DevCraft R3 2016 release webinar banner
Back to Top