locked
Formatting Problem RRS feed

  • Question

  • User-1314346660 posted

    Hello Experts,

    I have added a [dd, mm, yyyy] set of text boxes to capture a date of birth. The problem is that I cant get them to format on the page correctly. For some reason they "drop" and add some whitespace so that the column sits lower that others in my row. Does anyone have any suggestions on how to fix this please?

    Thanks very much in advance.

    Billson3000

    <div class="row">
                            <div class="col-sm-3">
                                <label>Sex</label>
                                <asp:DropDownList ID="ddSex" runat="server" required="True" CssClass="form-control" Font-Size="Medium" Height="35px" Width="100%">
                                    <asp:ListItem>Please choose...</asp:ListItem>
                                    <asp:ListItem>Female</asp:ListItem>
                                    <asp:ListItem>Male</asp:ListItem>
                                </asp:DropDownList>
                            </div>
    
    
                            <div class="col-sm-3">
                                <div><label>Date of birth</label></div>
                                <div class="col-sm-4">
                                    <label style="color: #FFFFFF">month</label>
                                    <asp:TextBox ID="txtDateOfBirthDD" MaxLength="2" placeholder="dd" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
                                </div>
                                <div class="col-sm-4">
                                    <label style="color: #FFFFFF">month</label>
                                    <asp:TextBox ID="txtDateOfBirthMM" MaxLength="2" placeholder="mm" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
                                </div>
                                <div class="col-sm-4">
                                    <label style="color: #FFFFFF">year</label>
                                    <asp:TextBox ID="txtDateOfBirthYY" MaxLength="4" placeholder="yyyy" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label>Class Number (if known)</label>
                                <asp:TextBox ID="txtClassNumber" runat="server" CssClass="form-control" Font-Size="Medium"></asp:TextBox>
                            </div>
                            <div class="col-sm-3">
                                <label>Ethnicity</label>
                                <asp:DropDownList ID="ddEthnicity" runat="server" CssClass="form-control" Font-Size="Medium" Height="35px" Width="100%">
                                    <asp:ListItem>Please choose...</asp:ListItem>
                                    <asp:ListItem>White British</asp:ListItem>
                                    <asp:ListItem>White Irish</asp:ListItem>
                                    <asp:ListItem>Any other White background</asp:ListItem>
                                    <asp:ListItem>White and Black Caribbean</asp:ListItem>
                                    <asp:ListItem>White and Black African</asp:ListItem>
                                    <asp:ListItem>White and Asian</asp:ListItem>
                                    <asp:ListItem>Any other mixed background</asp:ListItem>
                                    <asp:ListItem>Indian</asp:ListItem>
                                    <asp:ListItem>Pakistani</asp:ListItem>
                                    <asp:ListItem>Bangladeshi</asp:ListItem>
                                    <asp:ListItem>Any other Asian background</asp:ListItem>
                                    <asp:ListItem>Caribbean</asp:ListItem>
                                    <asp:ListItem>African</asp:ListItem>
                                    <asp:ListItem>Any other Black background</asp:ListItem>
                                    <asp:ListItem>Chinese</asp:ListItem>
                                    <asp:ListItem>Any other ethnic group</asp:ListItem>
                                    <asp:ListItem>Prefer not to say</asp:ListItem>
                                </asp:DropDownList>
                            </div>
                        </div>

    Sunday, September 2, 2018 6:20 PM

Answers

  • User1724605321 posted

    Hi Billson3000,

    That is because you include the labels . If the labels are not necessary since you have put placeholder on textbox to remind user , you can delete the labels :

     <div class="col-sm-3">
              <div><label>Date of birth</label></div>
              <div class="col-sm-4">
                    
                  <asp:TextBox ID="txtDateOfBirthDD" MaxLength="2" placeholder="dd" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
              </div>
              <div class="col-sm-4">
             
                  <asp:TextBox ID="txtDateOfBirthMM" MaxLength="2" placeholder="mm" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
              </div>
              <div class="col-sm-4">
    
                  <asp:TextBox ID="txtDateOfBirthYY" MaxLength="4" placeholder="yyyy" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
              </div>
    </div>

    And the result :

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 3, 2018 5:46 AM

All replies

  • User1724605321 posted

    Hi Billson3000,

    That is because you include the labels . If the labels are not necessary since you have put placeholder on textbox to remind user , you can delete the labels :

     <div class="col-sm-3">
              <div><label>Date of birth</label></div>
              <div class="col-sm-4">
                    
                  <asp:TextBox ID="txtDateOfBirthDD" MaxLength="2" placeholder="dd" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
              </div>
              <div class="col-sm-4">
             
                  <asp:TextBox ID="txtDateOfBirthMM" MaxLength="2" placeholder="mm" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
              </div>
              <div class="col-sm-4">
    
                  <asp:TextBox ID="txtDateOfBirthYY" MaxLength="4" placeholder="yyyy" required="True" runat="server" CssClass="form-control" Font-Size="Small"></asp:TextBox>
              </div>
    </div>

    And the result :

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 3, 2018 5:46 AM
  • User-1314346660 posted

    Thank you Nan Yu.

    Basic mistake! Thank you very much for your help!

    Monday, September 3, 2018 9:18 AM