locked
Reduce Gap between Label & TextBox RRS feed

  • Question

  • User-1499457942 posted

    Hi

     I have below code and i want to reduce gap between Label & TextBox

    <div class="form-group row">
            <label for="Code" class="col-sm-2">Code</label>
            <div class="col-sm-2">
                <asp:TextBox ID="txt_Code" CssClass="form-control input-sm" runat="server"></asp:TextBox>
            </div>
            <div class="col-sm-8 error">
                 <asp:RequiredFieldValidator ID="rfvtxt_Code" runat="server" ErrorMessage="Code cannot be empty!" Display="Dynamic" ToolTip="Enter Code" ControlToValidate="txt_Code"></asp:RequiredFieldValidator>
                 <asp:RegularExpressionValidator ID="revtxt_Code" runat="server" ErrorMessage="Code can consist of alphabetical characters , spaces!" Display="Dynamic" ToolTip="Enter Alphabats
                 " ControlToValidate="txt_Code" ValidationExpression="^[a-zA-Z\s]+$"></asp:RegularExpressionValidator>
            </div>
        </div>
    
        <div class="form-group row">
            <label for="Inflator" class="col-sm-2">Name</label>
            <div class="col-sm-1">
                <asp:TextBox ID="txt_Name" CssClass="form-control input-sm" runat="server"></asp:TextBox>
            </div>
            <div class="col-sm-8 error">
                 <asp:RequiredFieldValidator ID="rfvtxt_Name" runat="server" ErrorMessage="Name cannot be empty!" Display="Dynamic" ToolTip="Enter Value" ControlToValidate="txt_Name"></asp:RequiredFieldValidator>
                 <asp:RegularExpressionValidator ID="revtxt_Name" runat="server" ErrorMessage="Code can consist of alphabetical characters , spaces!" Display="Dynamic" ToolTip="Enter Alphabats
                 " ControlToValidate="txt_Name" ValidationExpression="^[a-zA-Z\s]+$"></asp:RegularExpressionValidator>
            </div>
        </div>

    Thanks

    Saturday, September 8, 2018 5:47 AM

All replies

  • User839733648 posted

    Hi JagjitSingh,

    According to your description and code, I suggest that you could add the class form-horizontal and control-label to your page.

    A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens.

    On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).

    Additional rules for a horizontal form:

    Add class .form-horizontal to the <form> element

    Add class .control-label to all <label> elements

    For more details, you could refer to the code below.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
        <form id="form1" runat="server" class="form-horizontal">
            <div class="form-group row">
                <label for="Code" class="col-sm-2 control-label">Code</label>
                <div class="col-sm-2">
                    <asp:TextBox ID="txt_Code" CssClass="form-control input-sm" runat="server"></asp:TextBox>
                </div>
                <div class="col-sm-8 error">
                    <asp:RequiredFieldValidator ID="rfvtxt_Code" runat="server" ErrorMessage="Code cannot be empty!" Display="Dynamic" ToolTip="Enter Code" ControlToValidate="txt_Code"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revtxt_Code" runat="server" ErrorMessage="Code can consist of alphabetical characters , spaces!" Display="Dynamic" ToolTip="Enter Alphabats"
                        ControlToValidate="txt_Code" ValidationExpression="^[a-zA-Z\s]+$"></asp:RegularExpressionValidator>
                </div>
            </div>
    
            <div class="form-group row">
                <label for="Inflator" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-1">
                    <asp:TextBox ID="txt_Name" CssClass="form-control input-sm" runat="server"></asp:TextBox>
                </div>
                <div class="col-sm-8 error">
                    <asp:RequiredFieldValidator ID="rfvtxt_Name" runat="server" ErrorMessage="Name cannot be empty!" Display="Dynamic" ToolTip="Enter Value" ControlToValidate="txt_Name"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revtxt_Name" runat="server" ErrorMessage="Code can consist of alphabetical characters , spaces!" Display="Dynamic" ToolTip="Enter Alphabats"
                        ControlToValidate="txt_Name" ValidationExpression="^[a-zA-Z\s]+$"></asp:RegularExpressionValidator>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,
    Jenifer

    Monday, September 10, 2018 3:29 AM
  • User-1499457942 posted

    Hi Jenifer

     I have Content Page . Where i should write below line

    <form id="form1" runat="server" class="form-horizontal">

    Thanks
    Monday, September 10, 2018 4:26 AM
  • User839733648 posted

    Hi JagjitSingh,

    When you use Content Page, you could add class="form-horizontal" into a div.

    For more details, you could refer to the code below.

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <br />
        <div class="form-horizontal">
            <div class="form-group row">
                <label for="Code" class="col-sm-2 control-label">Code</label>
                <div class="col-sm-2">
                    <asp:TextBox ID="txt_Code" CssClass="form-control input-sm" runat="server"></asp:TextBox>
                </div>
                <div class="col-sm-8 error">
                    <asp:RequiredFieldValidator ID="rfvtxt_Code" runat="server" ErrorMessage="Code cannot be empty!" Display="Dynamic" ToolTip="Enter Code" ControlToValidate="txt_Code"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revtxt_Code" runat="server" ErrorMessage="Code can consist of alphabetical characters , spaces!" Display="Dynamic" ToolTip="Enter Alphabats"
                        ControlToValidate="txt_Code" ValidationExpression="^[a-zA-Z\s]+$"></asp:RegularExpressionValidator>
                </div>
            </div>
    
            <div class="form-group row">
                <label for="Inflator" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-1">
                    <asp:TextBox ID="txt_Name" CssClass="form-control input-sm" runat="server"></asp:TextBox>
                </div>
                <div class="col-sm-8 error">
                    <asp:RequiredFieldValidator ID="rfvtxt_Name" runat="server" ErrorMessage="Name cannot be empty!" Display="Dynamic" ToolTip="Enter Value" ControlToValidate="txt_Name"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revtxt_Name" runat="server" ErrorMessage="Code can consist of alphabetical characters , spaces!" Display="Dynamic" ToolTip="Enter Alphabats"
                        ControlToValidate="txt_Name" ValidationExpression="^[a-zA-Z\s]+$"></asp:RegularExpressionValidator>
                </div>
            </div>
        </div>
    </asp:Content>

    result:

    Best Regards,

    Jenifer

    Monday, September 10, 2018 6:17 AM