Aligning inputs and labels

[Steve]

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>

[Princy]

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.

[Steve]

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.

[Dimo]

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