Lightweight problems

[Erik]

Hello,

 

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:

CSS:

<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;
    }
</style>

 

ASP.NET:

<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. 

Regards

 

Erik

[Galin]

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.


Regards,
Galin
Telerik