Aligning inputs and labels

4 posts, 1 answers
  1. Steve
    Steve avatar
    5 posts
    Member since:
    Nov 2010

    Posted 28 Nov 2010 Link to this post

    I'm relatively new to the Telerik controls, so bear with me.

    Working in VS2010, in a Telerik project... styles and CSS seem to wire up no problem, all is working as it should.

    Trouble is - it seems like a huge pain to insert a series of inputs and get things to line up.  Meaning, I'd like a two-column layout with the label for the input say 200px, and the input to be 300px.  With padding and whatnot, the overall box would be about 525px.

    I think I'm missing something conceptually about how to do this quick.  Right now, I'm dropping in a ASP Panel control, then adding RadTextBoxes.  You can set the width of the overall control (RadTextBox that is), but the width of each input area and each label is different.

    What's the best practice way to accomplish a nice looking input form with everything aligned in a couple columns?  I'd rather not use tables, and I've done fieldsets in other projects, and tables too.  I thought the Skins might fix it, but it doesn't appear to assign a width, AND it's using tables for the layout.

    I'm sure there's something simple, but I've been combing the how-to's for a couple hours.

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
        Skin="Web20" DecorationZoneID="ContentPlaceholder1" />
    <h1>
        Search Attendee Records</h1>
    <p>
        Enter a value or a partial value in any of the fields below. Your search will return
        all matches or partial matches. For example if you enter "A" for last name, your
        search will return all names beginning with "A".</p>
    <asp:Panel ID="Panel1" runat="server" GroupingText="Search Data" Width="450px">
        <telerik:RadTextBox ID="txtRegistrantID" runat="server" Label="RegistrantID" 
            Width="400px" Wrap="False">
        </telerik:RadTextBox><br />
        <telerik:RadTextBox ID="txtLastName" runat="server" Label="Last Name" 
            Width="400px" Wrap="False">
        </telerik:RadTextBox><br />
        <telerik:RadTextBox ID="txtFirstName" runat="server" Label="First Name" 
            Width="400px" Wrap="False">
        </telerik:RadTextBox><br />
        <telerik:RadTextBox ID="txtCompany" runat="server" Label="Company" 
            Width="400px" Wrap="False">
        </telerik:RadTextBox><br />
        <telerik:RadTextBox ID="txtCity" runat="server" Label="City" Width="400px" 
            Wrap="False">
        </telerik:RadTextBox><br />
        <telerik:RadButton ID="btnSubmit" runat="server" Text="Submit">
        </telerik:RadButton>
    </asp:Panel>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Nov 2010 Link to this post

    Hello Steve,

    You can achieve the desired style by modifying the preset CSS of the label control.

    CSS:
    .riLabel
            {
              width:100px !important;
              float:left !important;
            }

    Thanks,
    Princy.
  3. Steve
    Steve avatar
    5 posts
    Member since:
    Nov 2010

    Posted 29 Nov 2010 Link to this post

    Makes sense - but I think the CSS is actually extracted at runtime (there's no CSS file other than the one I created to style my layout).  However, I think you're still correct - this should work if I place it in my CSS file by itself.

    That's one other area of slight confusion.  As I read through posts, I saw posts about people copying CSS and image files to their website directory.  It appears that with VS2010, it's all wired up as an assembly, so no need to copy those files?

    The documentation is pretty good for each control, but I was having a hard time finding prerequisite tasks, and was assuming that there was some other component that i needed to wire up or install or call in order to get the inputs to align and work.

    Just wondering what the latest "best practice" is.  I know that labels and fieldsets make for a more accessible page, so I've been trying to move our team that way.
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 29 Nov 2010 Link to this post

    Hi Steve,

    Generally, yes, RadControls CSS stylesheets are embedded in the assembly and registered automatically. However, you still can add some custom styles to the application, which can tweak a control, according to your preferences OR use a completely custom (non-)embedded skin. Here is some more information:

    http://www.telerik.com/help/aspnet-ajax/howskinswork.html

    http://www.telerik.com/help/aspnet-ajax/modifyingexistingskins.html

    http://www.telerik.com/help/aspnet-ajax/createcustomskin.html

    You need to copy/move around RadControls CSS files and images only if you have custom ones.

    And yes, using labels is good.

    Kind regards,
    Dimo
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top