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.

Back to Top