Display error message below text box using RegularExpressionValidator in Gridview

Question

I am validating a TextBox in a Gridview. The error message displays when it is suppose to but the first word of the message displays beside the textbox an the rest under it. How can I make sure the entire message is below the text box.

This is the .aspx code:

 <asp:GridView ID="MappingGridView" runat="server" AllowSorting="True" AutoGenerateColumns="False" Caption="Enrollment Mapping Information" CaptionAlign="Top" 
    CssClass="grid" HorizontalAlign="Left" ShowFooter="True" AllowPaging="True" PageSize="4" ShowHeaderWhenEmpty="true" OnPageIndexChanging="MappingGridView_PageIndexChanging" 
     OnRowDataBound="MappingGridView_RowDataBound" OnRowCommand="MappingGridView_RowCommand">
    <Columns>
         <asp:TemplateField HeaderText="MappingID" SortExpression="mgvMappingID">
            <ItemTemplate>
                <asp:Label ID="mgvLblMappingID" runat="server" Text='<%# Bind("EnrollmentMappingID") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
 <asp:TemplateField HeaderText="CECityActivityID" SortExpression="mgvCECityActivityID">
            <EditItemTemplate>
                <asp:TextBox ID="mgvEditCECityActivityID" runat="server" Text='<%# Bind("CECityActivityID") %>'></asp:TextBox>
                <asp:RegularExpressionValidator ID="RegExpValEditCECityID" ControlToValidate="mgvEditCECityActivityID" runat="server" 
                     ErrorMessage="Enter 0-9, A-F, and hyphens. Maximum length is 50." ValidationGroup="MappingGrid" ValidationExpression="^[0-9A-Fa-f-]{0,50}$" 
                     Display="Dynamic" CssClass="message-error">
                 </asp:RegularExpressionValidator>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="mgvLblCECityActivityID" runat="server" Text='<%# Bind("CECityActivityID") %>'></asp:Label>
            </ItemTemplate>
             <FooterTemplate>
                <asp:TextBox ID="mgvInsertCECityActivityID" runat="server" Width="90%"></asp:TextBox>
                <asp:RegularExpressionValidator ID="RegExpValCECityID" ControlToValidate="mgvInsertCECityActivityID" runat="server" 
                     ErrorMessage="Enter only 0-9, A-F, and hyphens; maximum length is 50." ValidationGroup="MappingGrid" ValidationExpression="^[0-9A-Fa-f-]{0,50}$" 
                     Display="Dynamic" CssClass="message-error">
                 </asp:RegularExpressionValidator>
            </FooterTemplate>
        </asp:TemplateField>
 </Columns>
 </asp:GridView>

This is the display:

How can I get the text to display entirely on the line below the textbox?

Thanks, Gloria

Answer 1

Apply a CSS class CssClass="display-next"

<asp:RegularExpressionValidator ID="RegExpValCECityID" CssClass="display-next"

Then

.display-next
{
 clear:both;
 display:block;
 float:left;
}

Answer 2

One approach would be to put it inside a block element:

<p>
    <asp:RegularExpressionValidator ID="RegExpValCECityID" ControlToValidate="mgvInsertCECityActivityID" runat="server" 
         ErrorMessage="Enter only 0-9, A-F, and hyphens; maximum length is 50." ValidationGroup="MappingGrid" ValidationExpression="^[0-9A-Fa-f-]{0,50}$" 
         Display="Dynamic" CssClass="message-error">
     </asp:RegularExpressionValidator>

</p>

Another approach would be to add a CssClass and name it something like block-validation:

.block-validation {
    display: block;
}

You could even modify your current CssClass of message-error:

.message-error {
    display: block;
    ...
}

Answer 3

.display-next {

    display:block;
    float:inherit;
}

This css code will work..