How can I change the input width size default to 125px on some controls

4 posts, 0 answers
  1. Joao Araujo
    Joao Araujo avatar
    16 posts
    Member since:
    Aug 2009

    Posted 05 Dec 2009 Link to this post

    Hello,


        I am using VS 2008, Telerik ASP.NET 2009.2 .
      
        I want to know how to get rid of the style="width:125px"  value.

        I have a web site that has its own skin and layouts.

        I want to use all the features in my own skin, with imply size limits to input field.
        Unfortunately, when I try to force the size of the inputs with a css class. Telerik adds
        a   'Style="width:125" ' after the class, which forces the field size to be based on this parameters.
       
        That happens basically in all types of input, some with different sizes. How can I get rid of this
        value and force telerik to use only the values on the classes I am using.

         I know I can add a style to the skin, replacing the default behavior. That  hinders the benefit of
         having several class with different sizes on the classes, allowing me to have different standardized fields.
         here is an example
    <div>

          Thanks,

    Joao,  
     
  2. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 07 Dec 2009 Link to this post

    Hello Joao,

    The easiest option is to use !important in your custom CSS styles, so that you override the control's inline width style:

    .large
    {
          width: 300px  !important ;
    }

    An alternative (but more complex) solution would be to subscribe to the RadInput control's OnLoad client event and remove the inline width with Javascript:


    <telerik:RadTextBox ID="RadTextBox1" runat="server" ShouldResetWidthInPixels="false" CssClass="large">
        <ClientEvents OnLoad="MyLoad" />
    </telerik:RadTextBox>

    <script type="text/javascript">

    function MyLoad(sender, args)
    {
        sender._originalTextBoxCssText = "";
        sender._textBoxElement.style.width = "";
    }

    </script>


    Kind regards,
    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.
  3. Joao Araujo
    Joao Araujo avatar
    16 posts
    Member since:
    Aug 2009

    Posted 07 Dec 2009 Link to this post

    Hello,

        Thanks for the above answer. It helped me out.

        Now , I have a new challenge.  How can I get rid of the "150px"  width below.

    <div id="ctl00_Body_TicketDatePicker_wrapper" class="RadPicker RadPicker_Telerik " style="height: 20px; display: inline; width: 100%;" shouldresetwidthinpixels="false">

    I tried all the possible properties that I know without success... Now , I am kicking out to all directions .... For example:
    <Telerik:RadDatePicker ShouldResetWidthInPixels="false"
        Runat="server" Skin="Telerik" Style="Display:inline;width:100%"  >
        <DateInput Width="100%" Style="width:90%"></DateInput>
        <Calendar Width="100%" Style="width:100%"></Calendar>
    </Telerik:RadDatePicker>



    Thanks a lot,


    Joao,
  4. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 08 Dec 2009 Link to this post

    Hello Joao Araujo,

    Set a CssClass to the RadDatePicker control and then set a width of your preference:

    .MyClass  .rcTable
    {
             width : ....  !important ;
    }

    By the way, ShouldResetWidthInPixels is a property of the picker's DateInput, not of the picker itself.

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