InputFormSection adding more space than it should

Question

I'm using the InputFormSection control on a custom user control, sample below

        <table border="0" cellspacing="0" cellpadding="0" class="propertysheet" width="700px">
        <colgroup>
            <col style="width: 40%" />
            <col style="width: 60%" />
        </colgroup>
        <tr>
            <td>
                <wssuc:InputFormSection Title="Business Type" runat="server">
                    <template_inputformcontrols><Template_Control>
                    <asp:Label runat="server" ID="lblBusinessTypeSelected"></asp:Label>
                </Template_Control>
                </template_inputformcontrols>
                </wssuc:InputFormSection>
                <wssuc:InputFormSection Title="Business Name" runat="server">
                    <template_inputformcontrols><Template_Control>
                    <asp:Label runat="server" ID="lblBusinessName"></asp:Label>
                </Template_Control>
            </template_inputformcontrols>
                </wssuc:InputFormSection>
and so on...

My rows are really spaced out, and I'm not getting the cool shaded background on the right column like I should.

but i want it to look like normal SharePoint

Any ideas?

UPDATE I copied the contents from the second good image (_layouts/prjsetng.aspx) into my page, and i still have the spacing issue... BTW this is a custom form for my list, and it looks the same when using dialog and not.

UPDATE I copied my code into a clean application page and it looked better, however still had some spacing issues.

After further investigation and comparing the newform from a default task list through IE Dev tool bar, and the output from my code above, it appears as though these are not the same controls, not even close. The InputFormSections appear to be for application pages, not the list forms.

Using SharePoint Designer I converted one of these list forms into a custom list form to confirm, and sure enough they simply use

Ug, I should've stuck with my gut on this one and stayed with tables...

Answer 1

You're probably looking for InputFormControl. It should be placed inside Template_Control tag of InputFormSection control.

In header section of your custom user control, you will need to add the following code:

<%@ Register TagPrefix="wssuc" TagName="InputFormSection" Src="~/_controltemplates/InputFormSection.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="InputFormControl" Src="~/_controltemplates/InputFormControl.ascx" %>

Then, you can use InputFormSection and InputFormControl controls in following manner:

<table border="0" width="100%" cellspacing="0" cellpadding="0">

    <wssuc:InputFormSection Title="Title of section"
        Description="Enter description of section here"
        runat="server">
        <Template_InputFormControls>
            <wssuc:InputFormControl LabelText="Optional label displayed above your control"
                ExampleText="Optional example text displayed below your control"
                runat="server">
                <Template_Control>
                    <asp:Label runat="server" ID="lblBusinessTypeSelected"></asp:Label>
                </Template_Control>
            </wssuc:InputFormControl>
        </Template_InputFormControls>
    </wssuc:InputFormSection>

</table>

Update:

Tested the code above. With the default SharePoint theme, it works like a charm:

1. I've created a blank new SharePoint Empty Project in Visual Studio.
2. I've added layouts mapped folder, and added an Application Page to it.
3. Added the code to the aspx file (table goes to asp:Content ID="Main" tag)
4. Deployed
5. Navigated to the page using browser, and got following screenshot:

So, something else wrong with your control (or with your site). Maybe you have customized masterpage, or added some custom css files which broke the markup.

I'd recommend you to create a blank new site, copy your control into separated solution, remove all unrelated code, and start testing.

Answer 2

I believe you need to give the td wrapper a class of ms-authoringcontrols ms-inputformcontrols looking at the Title, Description, and navigation page rendered output you have linked to..

Answer 3

So it appears, as previously noted in my updated post, that the InputFormSection is for application and site pages, not list forms. I explored with IE Dev toolbar and SharePoint Designer and saw huge differences between the two page "types".

As a result, I will remove my InputFormSections and use straight up tables and tds with classes, i.e.

<table>
<tr>
  <td class="ms-formlabel">Title</td>
  <td class="ms-formbody"><asp:Textbox id="txtTitle" runat="server" cssclass="ms-input"/></td>
</tr>...