none
Textbox display issue RRS feed

  • Question

  • How can I make a textbox for First name and another textbox for Surname be displayed horizontally and not vertically?
    • Moved by CoolDadTx Wednesday, February 20, 2019 2:51 PM ASP.NET related
    Wednesday, February 20, 2019 12:28 AM

All replies

  • Hi Donald Uko,

    Thank you for posting here.

    For your question, what is the type of your project?

    In Winform, you could set it directly in Design form. 

    Best Regards,

    Wendy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, February 20, 2019 2:59 AM
  • Hi

    Are you looking for HTML code like below,

     <table>
            <tr>
                <td>
                    <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="txtSurName" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>

    Thanks


    Wednesday, February 20, 2019 8:53 AM
  • I noticed in a past reply you have used Bootstrap, if this is an ASP.NET solution with Bootstrap your can look at wrapping content in a div with container-fluid, use their grid system using the row class and col-xx-x class to place your inputs into col's and for this to work right best to understanding Bootstrap spacing classes.

    Here are some ideas using Bootstrap 4x

    <!DOCTYPE html>
    <html>
    <head>
    
        <!-- Bootstrap 4 -->
    
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap horizontal align</title>
    
        <script src="Scripts/jquery-3.0.0.js"></script>
        <link href="Content/bootstrap-grid.min.css" rel="stylesheet" />
        <script src="Scripts/bootstrap.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/bootstrap-grid.css" rel="stylesheet" />
    
    </head>
    <body>
        <div class="container-fluid shadow-sm mb-5 bg-secondary">
            <span style="color: white; font-weight: bold">Several examples</span>
    
        </div>
        <div class="container-fluid">
            <h3>Example 1 - centered</h3>
    
            <div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
                <div class="p-2">
                    <label>First</label>
                </div>
    
                <div class="p-2">
                    <input type="text" class="form-control" value="Karen" />
                </div>
    
                <div class="p-2">
                    <label>Last</label>
                </div>
    
                <div class="p-2">
                    <input type="text" class="form-control" value="Payne" />
                </div>
            </div>
    
            <h3>Example 2 justify left</h3>
    
            <div class="d-flex flex-row justify-content-md-start" style="height: 100px;">
                <div class="p-2">
                    <label>First</label>
                </div>
                <div class="p-2">
                    <input type="text" class="form-control" value="Karen" />
                </div>
    
                <div class="p-2">
                    <label>Last</label>
                </div>
    
                <div class="p-2">
                    <input type="text" class="form-control" value="Payne" />
                </div>
            </div>
    
    
            <h3>Example 3 justify left</h3>
    
            <div class="d-flex flex-row justify-content-md-start" style="height: 100px;">
    
                <div class="p-2">
                    <label for="inputSSN">SSN</label>
                    <input type="text" id="inputSSN"
                           class="form-control" placeholder="SSN"
                           required autofocus>
                </div>
    
                <div class="p-2">
                    <label for="inputPin">PIN</label>
                    <input type="password" id="inputPin"
                           class="form-control" placeholder="5555"
                           required>
                </div>
            </div>
    
            <h3>Example 4 justify left</h3>
    
            <form id="frmOptions" method="post">
                <div class="form-group">
                    <div class="input-group">
                        <label class="m-2">First</label>
                        <input id="f1" type="text" class="form-control">
                        <label class="m-2">Last</label>
                        <input id="l1" type="text" class="form-control">
                    </div>
                </div>
            </form>
    
            <h3>Example 5 justify left</h3>
    
            <div class="form-group row">
                <div class="col-2">
                    <label for="fexl-1">First</label>
                    <input class="form-control" id="fexl-1" type="text">
                </div>
                <div class="col-3">
                    <label for="fexl-2">Last</label>
                    <input class="form-control" id="fexl-2" type="text">
                </div>
            </div>
    
        </div>
    </body>
    </html>
    


    Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
    VB Forums - moderator
    profile for Karen Payne on Stack Exchange, a network of free, community-driven Q&A sites


    Wednesday, February 20, 2019 11:53 AM
  • Please post questions related to ASP.NET in the ASP.NET forums.

    Michael Taylor http://www.michaeltaylorp3.net

    Wednesday, February 20, 2019 2:51 PM