locked
Form Design RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below code . I want textbox to be sm-2 . It is taking whole line.

    <div class="form-group">
                <label for="exampleFormControlInput1">Target</label>
                    <asp:TextBox ID="txt_Target" CssClass="form-control col-sm-2" runat="server"></asp:TextBox>
    
            </div>
            <div class="form-group">
                <label for="exampleFormControlInput1">Percent</label>
    
                    <asp:TextBox ID="txt_Percent" CssClass="form-control col-sm-2" runat="server"></asp:TextBox>
    
            </div>
            <div class="form-group">
                <label for="exampleFormControlInput1">Method</label>
                <asp:DropDownList ID="ddlMethod" runat="server" CssClass="form-control col-sm-2">
                    </asp:DropDownList>
            </div>

    Secondly i want error message to be displayed in fornt of Textbox , not down.

    Thanls

    Wednesday, October 3, 2018 6:46 AM

All replies

  • User475983607 posted

    I have below code . I want textbox to be sm-2 . It is taking whole line.

    Try going to the Bootstrap site and reading the openly published documentation. 

    https://v4-alpha.getbootstrap.com/components/forms/

    The input is responsive and it will take up an width of the parent contains.

    Secondly i want error message to be displayed in fornt of Textbox , not down.

    This is covered clearly and openly at the link above.   See the docs...

    Wednesday, October 3, 2018 1:46 PM
  • User839733648 posted

    Hi JagjitSingh,

    I want textbox to be sm-2 . It is taking whole line.

    You just could add the class row and create a div with col-sm-2 class to achieve your requirement.

    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>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="form-group row">
                <div class="col-sm-2">
                    <label for="exampleFormControlInput1">Target</label>
                    <asp:TextBox ID="txt_Target" CssClass="form-control" runat="server"></asp:TextBox>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-2">
                    <label for="exampleFormControlInput1">Percent</label>
                    <asp:TextBox ID="txt_Percent" CssClass="form-control" runat="server"></asp:TextBox>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-2">
                    <label for="exampleFormControlInput1">Method</label>
                    <asp:DropDownList ID="ddlMethod" runat="server" CssClass="form-control">
                    </asp:DropDownList>
                </div>
            </div>
        </form>
    </body>
    </html>

    result:

    Secondly i want error message to be displayed in fornt of Textbox , not down.

    I could not find the related error message from your code provided, so I could not reproduce your problem.

    If possible, please provide more detailed codes so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    Thursday, October 4, 2018 3:14 AM