This is a migrated thread and some comments may be shown as answers.

[Solved] Achieve 3D effect with DatePicker

3 Answers 106 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

Accepted

answered on 18 Jan 2010, 04:48 PM

Hello Greg,

Here is what you can do to achieve the desired look for the RadDatePicker's textbox:

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

<style type="text/css">

.RadPicker .RadInput .riTextBox

{

border-style:inset solid solid inset;

border-width:2px 1px 1px 2px;

border-color:#aaa #ccc #ccc #aaa;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" />

</form>

</body>

</html>

As for the RadComboBox, I am not sure how exactly do you imagine the control should look like, but if you need it exactly as a regular asp:DropDownList, a custom skin is the only solution.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 19 Jan 2010, 06:07 PM

Great, that answered that question but raises another. I have not been able to define formatting in an css file without using cssclass. Your answer helped me to get an idea of what it needs to look like. I am trying to define the formating to apply to all Telerik controls, starting with RadTextBox. I tried to look at the html after rendering and by looking at the RadDatepicker and RadTextbox class definitions it appears that for textbox, it should read

.RadInput .riTextBox
{

border-style:inset solid solid inset;

border-width:2px 1px 1px 2px;

border-color:#aaa #ccc #ccc #aaa;

}

This does not work. Can you tell me what this needs to be for TextBox, and give me some insight on how these are defined so I can easily determine myself what it is for the other controls without having to ask every time? Thanks!

Accepted

answered on 20 Jan 2010, 03:18 PM

Hello Greg,

The specificity of your CSS selector is lower than the one in the RadInput skins. Please use

html body form .RadInput .riTextBox
{
    border-style:inset solid solid inset;
    border-width:2px 1px 1px 2px;
    border-color:#aaa #ccc #ccc #aaa;
}

or

.RadInput .riTextBox
{
    border-style:inset solid solid inset !important;
    border-width:2px 1px 1px 2px !important;
    border-color:#aaa #ccc #ccc #aaa !important;
}

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

(pay attention to the links at the end)

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.