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

6 posts, 0 answers
  1. Vargis
    Vargis avatar
    25 posts
    Member since:
    Dec 2011

    Posted 20 Jun 2012 Link to this post

    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
  2. Vargis
    Vargis avatar
    25 posts
    Member since:
    Dec 2011

    Posted 22 Jun 2012 Link to this post

    Too bad no responds from telerik
  3. Galin
    Admin
    Galin avatar
    526 posts

    Posted 25 Jun 2012 Link to this post

    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.
  4. Vargis
    Vargis avatar
    25 posts
    Member since:
    Dec 2011

    Posted 26 Jun 2012 Link to this post

    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
  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 03 Jul 2012 Link to this post

    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.
  6. Vargis
    Vargis avatar
    25 posts
    Member since:
    Dec 2011

    Posted 05 Jul 2012 Link to this post

    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.
Back to Top