input fields width is arbitrary set to 154px

6 posts, 0 answers
  1. Didier
    Didier avatar
    13 posts
    Member since:
    Jan 2008

    Posted 16 Apr 2012 Link to this post

    in Telerik.Web.UI_2012_1_411_Dev input fields width is now  arbitrary set to 154px:

    .RadForm.rfdTextbox input[type="text"], .RadForm.rfdTextbox input[type="password"], .RadForm.rfdTextbox input[type="search"], .RadForm.rfdTextbox input[type="url"], .RadForm.rfdTextbox input[type="tel"], .RadForm.rfdTextbox input[type="email"] (ligne 1)

    {

    width: 154px;

    padding-top: 2px;

    padding-right: 2px;

    padding-bottom: 3px;

    padding-left: 2px;

    height: auto;

    line-height: normal;

    }

    Is there some good reason for that?
    Thanks :-)

  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 17 Apr 2012 Link to this post

    Hello,

    From Q3 2011 all input elements default width is set to 160px as it was mentioned in the release notes as a breaking change. Now if you place an HTML input or asp textbox, or another Telerik input control without specifying explicitly the width, it will be rendered to 160px as the mentioned from you: 154px width + 2px left padding + 2px right padding + 1px left border + 1px right border = 160px width.

    This will allow you to have unified look and feel in all browsers while using different input Telerik controls.

    Greetings,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Didier
    Didier avatar
    13 posts
    Member since:
    Jan 2008

    Posted 17 Apr 2012 Link to this post

    Previously we were using Telerik.Web.UI_2011_3_1305_Dev and "our" fields were at the precise width we had decided (using size="nn"), for example:
    <input name="ctl00$ContentPlaceHolder1$ContactFirstNameF" type="text" size="48" id="ctl00_ContentPlaceHolder1_ContactFirstNameF" />

    With the new release (Telerik.Web.UI_2012_1_411_Dev) they are all "short": size="nn" has no more effect.

    Telerik previous styles (Telerik.Web.UI_2011_3_1305_Dev, the last Q3 2011) were :

    .RadForm.rfdTextbox input[type="text"], .RadForm.rfdTextbox input[type="password"] (ligne 98)

    {

    padding-top: 2px;

    padding-right: 2px;

    padding-bottom: 3px;

    padding-left: 2px;

    height: auto;

    line-height: normal;

    }

    Should we code style="width:nnnpx;' for each input field rather than size="nn"??? Or is there any bug relative to size??

    Thanks for your help.

  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 17 Apr 2012 Link to this post

    Hi,

    You should use style for inputs, or to create CSS class if you have a lot of inputs with equal size, or if you use asp text box, you could use the width property:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" Skin="Sunset" />
        <input type="text" style="width: 50px;" /><br />
        <br />
        <input type="text" size="50" /><br />
        <br />
        <asp:TextBox runat="server" Width="50"></asp:TextBox>
        </form>
    </body>
    </html>


    The first and third will be 50px, the second will be the default 160px;

    The size property is not related with the layout, so it should not be used to specify width. It is related with the visible symbols in the input, and depending on the chosen font family it could be really different, while 50px are always 50px.

    Greetings,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  6. Didier
    Didier avatar
    13 posts
    Member since:
    Jan 2008

    Posted 17 Apr 2012 Link to this post

    Hi,

    So we changed our "framework" so that it sets Width as a percentage (ie Width % = 90 / columns * 64). It does the trick.
    The global aspect of "decorated forms" is better with the new styles "2012 Q1" :-)
  7. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 18 Apr 2012 Link to this post

    Hi,

    Yes, as mentioned in my previous post, for asp textboxes you could use both width or style, for HTML text inputs you should use style, and for both asp and HTML you could set a specific class. When using style you could set the width i pixels, em, pt etc. Using width property you could use pixels and percentages.

    In previous versions, as IE6, 7, 8 does not support rounded corners we are using additional HTML elements to simulate it, because of these additional HTML elements if you set the width to 100px it would be 100 in modern browsers, but more in IE6-IE8 - about 108px.

    Now with the unification fix, the problem is solved.

    All the best,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017