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

How to write CSS for Telerick html controls like label, textbox, combos, textarea etc

5 Answers 126 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Vargis
Top achievements
Rank 1
Vargis asked on 20 Jun 2012, 06:07 AM
Firstly am very fresh to this components. I already used css to lay asp:labels and asp:textboxes etc ..even grid control and calender cntrls in asp.
We need UI help to design a big project which have lot of labels and its Associated Input fields to lay ...2 column ..3 column upto 4
So how we have to write our CSS.

I just go thru the a page which is fully filled with telerick controls. And i found we cant change their color or margins or paddings thru CSS. Only we can control its width from an external CSS file. Also dropdowns are rendering inside a table so i cant control its width with SELECT tag.

Also i found that in grid if column increase width also increase will break layout ..Pls help me am attaching a sample page in our present ASP application
Thanks in Adv
 
UI Designer

5 Answers, 1 is accepted

Sort by
0
Vargis
Top achievements
Rank 1
answered on 22 Jun 2012, 08:51 AM
Too bad no responds from telerik
0
Galin
Telerik team
answered on 25 Jun 2012, 11:57 AM
Hi Vargis,

You can add margin to the wrapper of the RadInput Control with the following CSS rule
.RadInput
{
    margin: 5px 10px;
}

Also, the padding should be set on the input element, e.g.
html body .RadInput input.riTextBox
{
    padding: 2px 5px;
}

Additional, please refer to the following styling demo and blog post
http://demos.telerik.com/aspnet-ajax/input/examples/appearance/styles/defaultcs.aspx

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

I hope this helps.

All the best,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Vargis
Top achievements
Rank 1
answered on 26 Jun 2012, 05:18 AM
Thanks Galin
We are going to buy this controls but your team support is too slow.

Your  answer is not at all

Please see our CSS structure


/* To divide a page into 2 column */

.div2col-S,.div2col-M,.div2col-L, .div2col-bothlbl {width:47.5%;margin:0 0 0 1.5%;}

/* To Align Label and other input fields
In .div2col-S Label width occupies 20%
In .div2col-S Label width occupies 30%
In .div2col-S Label width occupies 40%
*/

.div2col-S span, .div2col-S label {float:left; width:20%}
.div2col-S input[type=text], .div2col-L textarea {float:left; width:72%}
.div2col-S select {float:left; width:73%}


.div2col-M span, .div2col-M label, .div2col-M a {float:left; width:30%}
.div2col-M input[type=text], .div2col-M textarea{float:left; width:60%}
.div2col-M select {float:left; width:61%}


.div2col-L span, .div2col-L label {float:left; width:40%}
.div2col-L input[type=text], .div2col-L textarea {float:left; width:52%}
.div2col-L select {float:left; width:53%}

So we dont hav to put width on every element. Becoz of putting dimensions in Percentage(%) instead of Pixels(px) elements wil adj according to screen size it will increase or decrease
0
Galin
Telerik team
answered on 03 Jul 2012, 01:50 PM
Hello Vargis,


Please note, there is no guaranteed response time for the forum posts.

However, based only on the provided CSS rules I am not quite sure that I correctly understand the case you are describing. Could you please give us more details on what you are trying to achieve or possibly a small running project that we can use to reproduce the case.

Looking forward to your reply.


Greetings,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Vargis
Top achievements
Rank 1
answered on 05 Jul 2012, 05:15 AM
Thanks for your reply.
Now I had achieved wat i want to do. Percentage is worked .Also no need to call a css class on every telerik field/control.
Its all from an external css globally.
Tags
General Discussions
Asked by
Vargis
Top achievements
Rank 1
Answers by
Vargis
Top achievements
Rank 1
Galin
Telerik team
Share this question
or