locked
Alignment of label and controls in opposite side is not proper in divs RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    As I am not enough good at designing.

    I am using a responsive layout and I know for responsive you have to put all controls and labels in divs not in table. I can align those in table but in div i am not able to do.

    Even I put display:inline-block property on opposite divs to make those aligned but no success. Please suggest below is my code.

    <div class="MyMaindiv">
    
                              <div class="divbig">
    
                                  <fieldset>
                                      <legend>Project</legend>
                                      <div class="divColumn">
                                          <div class="divlabel">Project:</div>
                                          <div class="divfield">
                                              <asp:TextBox ID="txtProjectTitle" runat="server"></asp:TextBox></div>
                                      </div>
                                      <br>
                                      Client:
                                      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br>
                                      PMC:
                                      <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                                      Land Rent Period:
                                      <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                                      Land Rent :
                                      <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
                                      DIA :
                                      <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox><br />
                                      No. of THK :
                                      <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox><br />
                                      Total Order Qty.MTRS :
                                      <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox><br />
                                      Total Order Qty.MTRS :
                                      <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
                                      Total Order Qty.Nos :
                                      <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
    
                                  </fieldset>
    
                              </div>
    
                              </div>
    
                              </div>
    
    					</div>

    below is the out put

    Please suggest

    Saturday, March 17, 2018 7:50 AM

Answers

  • User-832373396 posted

    <g class="gr_ gr_14 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="14" data-gr-id="14">Hi</g> <g class="gr_ gr_11 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="11" data-gr-id="11">demoninside</g>,

    Sir, it looks fine if you only want to use the fieldset;

    and here is the example online 

    <form>
     <fieldset>
      <legend>Personalia:</legend>
      Name: <input type="text"><br>
      Email: <input type="text"><br>
      Date of birth: <input type="text">
     </fieldset>
    </form>

    to make those aligne
    responsive

    Next, I suggest that you could use the bootstrap as official Microsoft recommended; 

    Bootstrap Horizontal Form

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <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>
    </head>
    <body>
    
    <div class="container">
      <h2>Horizontal form</h2>
      <form class="form-horizontal" action="/action_page.php">
        <div class="form-group">
          <label class="control-label col-sm-2" for="email">Email:</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="pwd">Password:</label>
          <div class="col-sm-10">          
            <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
          </div>
        </div>
        <div class="form-group">        
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
          </div>
        </div>
        <div class="form-group">        
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </div>
      </form>
    </div>
    
    </body>
    </html>
    

    and Simple Working Example, Online 

    Bootstrap Form Guide

    Fieldset Guide

    Welcome to back if met any question :)

    With regards, Angelina Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 19, 2018 7:25 AM