Aligning Controls in a FormTemplate within a Grid

[Rodney]

I have a telrik Grid with a FormTemplate, Inside of that I have a Multiline text box and two DropDownList controls. Because the Multiline text box takes up so much space the other controls appear to be aligning to the bottom and I want them to align to the top within the template. I haven't been able to figure out how or where to apply something like the ItemStyle-VerticalAlign="Top" and actually get it to work. I would appreciate any thoughts anyone might have.

Below is my current code:


<EditFormSettings EditFormType="Template">
    <FormTemplate>                           
        <div class="editGridSubGoal">>                     
            <asp:Label ID="lblSubGoalText" runat="server" Text="Sub-Goal:"  AssociatedControlID="tbSubGoalText"  Visible="false"  /> 
            <asp:TextBox ID="tbSubGoalText" runat="Server" TextAlign="Right" TextMode="MultiLine" Rows="5" Columns="55"
                 Text='<%# Eval("SubgoalText") %>' MaxLength="255" style=" overflow:auto;"  
                 onkeydown="if (this.value.length > 255) this.value = this.value.substring(0, 255);"
                 onkeyup="if (this.value.length > 255) this.value = this.value.substring(0, 255);"/>
            <asp:RequiredFieldValidator ID="tbSubGoalText_RequiredFieldValidator" runat="server" ErrorMessage="* Required" CssClass="validator" ControlToValidate="tbSubGoalText" Display="Dynamic" />
            <asp:Label ID="lblEditSubGoalStatus" runat="server" Text="Status:" AssociatedControlID="ddlSubGoalStatus" Visible="false" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:DropDownList ID="ddlSubGoalStatus" runat="server" SelectedValue='<%# Bind("StatusTypeCode") %>'>                              <asp:ListItem Value="INPROGRESS" Text="In Progress" />
            <asp:ListItem Value="MET" Text="Met" />
            <asp:ListItem Value="UNMET" Text="Un-Met" />
            </asp:DropDownList>
            <asp:LinkButton ID="btnCancelSubGoal" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel"></asp:LinkButton>
            <asp:LinkButton ID="btnSaveSubGoal" runat="server"  CssClass="silverLinkButton"  CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' ><span>Save</span></asp:LinkButton>
        </div>
   </FormTemplate>



[Viktor Tachev]

Hi Rodney,

In order to achieve this behavior you can use CSS and float the TextBox control to the left. Check out the following code snippet that illustrates the approach:

Markup:

<FormTemplate>
    <div class="editGridSubGoal">
        <div class="subGoalCell">
            <asp:Label ID="lblSubGoalText" runat="server" Text="Sub-Goal:" AssociatedControlID="tbSubGoalText" Visible="false" />

            <asp:TextBox ID="tbSubGoalText" runat="Server" TextAlign="Right" TextMode="MultiLine" Rows="5" Columns="55"
                Text='sdfsdsdg' MaxLength="255" Style="overflow: auto;"
                onkeydown="if (this.value.length > 255) this.value = this.value.substring(0, 255);"
                onkeyup="if (this.value.length > 255) this.value = this.value.substring(0, 255);" />

            <asp:RequiredFieldValidator ID="tbSubGoalText_RequiredFieldValidator" runat="server" ErrorMessage="* Required" CssClass="validator" ControlToValidate="tbSubGoalText" Display="Dynamic" />
        </div>
        <div class="ddlCell">
            <asp:Label ID="lblEditSubGoalStatus" runat="server" Text="Status:" AssociatedControlID="ddlSubGoalStatus" Visible="false" />

            <asp:DropDownList ID="ddlSubGoalStatus" runat="server">
                <asp:ListItem Value="INPROGRESS" Text="In Progress" />
                <asp:ListItem Value="MET" Text="Met" />
                <asp:ListItem Value="UNMET" Text="Un-Met" />
            </asp:DropDownList>
        </div>
        <div class="buttonsCell">
            <asp:LinkButton ID="btnCancelSubGoal" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel"></asp:LinkButton>

            <asp:LinkButton ID="btnSaveSubGoal" runat="server" CssClass="silverLinkButton" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'><span>Save</span></asp:LinkButton>
        </div>
    </div>
</FormTemplate>

CSS:

.subGoalCell {
    float: left;
}

.buttonsCell {
    clear: both;
}

Regards,
Viktor Tachev
Telerik