Click here to Skip to main content
15,882,114 members
Search within:


How to I get my controls all on one line? (Bootstrap css)
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi. Trying to get some controls on the same horizontal line:

ASP.NET
                    <div class="panel panel-primary">
                        <div class="panel-heading">Add a New User</div>
                        <div class="panel-body">

                            <div id="fgNewUser" class="form-group">
                                <div class="row">
                                    <label for="vtbxNewUserName" class="col-sm-2 control-label">User name</label>
                                    <div class="col-sm-4 input-group">
                                        <vtbx:ValidatedTextbox  runat="server" ID="vtbxNewUserName" CssClass="form-control" aria-describedby="inputError2Status" />
                                        <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" style="display: none"></span>
                                    </div>
                                    <div class="col-sm-2"></div>
                                    <div class="col-sm-4 input-group">
                                        <asp:CheckBox runat="server" CssClass="checkbox-inline" ID="cbxNewIsLocked" Text="Account Locked Out" Checked="False" />
                                        <asp:CheckBox runat="server" CssClass="checkbox-inline" ID="cbxNewIsApproved" Text="Account Approved" Checked="True" />
                                    </div>
                                </div>
                            </div>
...


So far I have the label and textbox sitting within the left half of the panel and the empty and checkboxs sit underneath them >_<

What am I doing wrong?

Thanks

EDIT:

This is the latest version of my markup including the whole panel:
ASP.NET
  <div class="panel-heading">Add a New User</div>
   <div class="panel-body">
 
      <div id="fgNewUser" class="form-group has-feedback">
         <label for="vtbxNewUserName" class="col-sm-2 control-label">User name</label>
         <div class="col-sm-4">
            <vtbx:ValidatedTextbox   runat="server" ID="vtbxNewUserName" CssClass="form-control" aria-describedby="inputError2Status" />
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" style="display: none"></span>
         </div>
         <div class="col-sm-2"></div>
         <div class="col-sm-4">
            <asp:CheckBox runat="server" CssClass="checkbox-inline" ID="cbxNewIsLocked" Text="Account Locked Out" Checked="False" />
            <asp:CheckBox runat="server" CssClass="checkbox-inline" ID="cbxNewIsApproved" Text="Account Approved" Checked="True" />
         </div>
      </div>
      <div class="form-group has-feedback">
         <label for="vtbxNewUserPassword" class="col-sm-2 control-label">Password</label>
         <div class="col-sm-10">
            <vtbx:ValidatedTextbox   runat="server" ID="vtbxNewUserPassword" CssClass="form-control tbx-new-user-password" />
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" style="display: none"></span>
         </div>
         <div>
            <asp:Button runat="server" ID="btnGeneratePassword" CssClass="btn btn-default btn-generate-password" Text="Generate Password" />
            <asp:CheckBox runat="server" ID="cbxIncludeLowerCase" CssClass="checkbox-inline cbx-include-lower-case" Text="Include Lower Case letters" Checked="True" />
            <asp:CheckBox runat="server" ID="cbxIncludeUpperCase" CssClass="checkbox-inline cbx-include-upper-case" Text="Include Upper Case letters" Checked="True" />
            <asp:CheckBox runat="server" ID="cbxIncludeNumbers" CssClass="checkbox-inline cbx-include-numbers" Text="Include Numbers" Checked="True" />
            <asp:CheckBox runat="server" ID="cbxIncludeSpecial" CssClass="checkbox-inline cbx-include-special" Text="Include Special Charactors" Checked="False" />
            <asp:CheckBox runat="server" ID="cbxEndWithASpecial" CssClass="checkbox-inline cbx-end-with-a-special" Text="Special Charactor at End" Checked="True" />
         </div>
      </div>
      <div id="newEmailFormGroup" class="form-group has-feedback">
         <label for="vtbxNewUserEmail" class="col-sm-2 control-label">Email</label>
         <div class="col-sm-10">
            <div class="input-group">
               <span class="input-group-addon">@</span>
               <vtbx:ValidatedTextbox   runat="server" ID="vtbxNewUserEmail" CssClass="form-control" />
            </div>
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" style="display: none"></span>
         </div>
      </div>
      <div class="form-group">
         <label for="vtbxNewUserComment" class="col-sm-2 control-label">Comment</label>
         <div class="col-sm-10">
            <vtbx:ValidatedTextbox   runat="server" ID="vtbxNewUserComment" CssClass="form-control" />
         </div>
      </div>
      <div class="form-group">
         <asp:Button runat="server" ID="btnSaveNewUser" Text="Save New User" CssClass="btn btn-default" />
      </div>
   </div>
</div>


I tested my source on jsfiddle and it came out fine. In the website it does not >_< (image linked)

My issue must lie elsewhere so I will accept the answer below ^_^

http://tinypic.com/r/29zsf86/8[^]
Posted
Updated 12-Apr-15 22:28pm
v4
Add a Solution

1 solution

From the Bootstrap documentation:
Input Groups[^]:

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

Also, you shouldn't need the div.row inside the div.form-group. Combining the two will give you too much negative margin-left / margin-right.

Try something like this:
HTML
<div id="newUserPanel" class="panel panel-primary">
   <div class="panel-heading">Add a New User</div>
   <div class="panel-body">

      <div id="fgNewUser" class="form-group has-feedback">
         <label for="vtbxNewUserName" class="col-sm-2 control-label">User name</label>
         <div class="col-sm-4">
            <vtbx:ValidatedTextbox  runat="server" ID="vtbxNewUserName" CssClass="form-control" aria-describedby="inputError2Status" />
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" style="display: none"></span>
         </div>
         <div class="col-sm-2"></div>
         <div class="col-sm-4">
            <asp:CheckBox runat="server" CssClass="checkbox-inline" ID="cbxNewIsLocked" Text="Account Locked Out" Checked="False" />
            <asp:CheckBox runat="server" CssClass="checkbox-inline" ID="cbxNewIsApproved" Text="Account Approved" Checked="True" />
         </div>
      </div>
      <div class="form-group has-feedback">
         <label for="vtbxNewUserPassword" class="col-sm-2 control-label">Password</label>
         <div class="col-sm-10">
            <vtbx:ValidatedTextbox  runat="server" ID="vtbxNewUserPassword" CssClass="form-control tbx-new-user-password" />
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" style="display: none"></span>
         </div>
         <div>
            <asp:Button runat="server" ID="btnGeneratePassword" CssClass="btn btn-default btn-generate-password" Text="Generate Password" />
            <asp:CheckBox runat="server" ID="cbxIncludeLowerCase" CssClass="checkbox-inline cbx-include-lower-case" Text="Include Lower Case letters" Checked="True" />
            <asp:CheckBox runat="server" ID="cbxIncludeUpperCase" CssClass="checkbox-inline cbx-include-upper-case" Text="Include Upper Case letters" Checked="True" />
            <asp:CheckBox runat="server" ID="cbxIncludeNumbers" CssClass="checkbox-inline cbx-include-numbers" Text="Include Numbers" Checked="True" />
            <asp:CheckBox runat="server" ID="cbxIncludeSpecial" CssClass="checkbox-inline cbx-include-special" Text="Include Special Charactors" Checked="False" />
            <asp:CheckBox runat="server" ID="cbxEndWithASpecial" CssClass="checkbox-inline cbx-end-with-a-special" Text="Special Charactor at End" Checked="True" />
         </div>
      </div>
      <div id="newEmailFormGroup" class="form-group has-feedback">
         <label for="vtbxNewUserEmail" class="col-sm-2 control-label">Email</label>
         <div class="col-sm-10">
            <div class="input-group">
               <span class="input-group-addon">@</span>
               <vtbx:ValidatedTextbox  runat="server" ID="vtbxNewUserEmail" CssClass="form-control" />
            </div>
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" style="display: none"></span>
         </div>
      </div>
      <div class="form-group">
         <label for="vtbxNewUserComment" class="col-sm-2 control-label">Comment</label>
         <div class="col-sm-10">
            <vtbx:ValidatedTextbox  runat="server" ID="vtbxNewUserComment" CssClass="form-control" />
         </div>
      </div>
      <div class="form-group">
         <asp:Button runat="server" ID="btnSaveNewUser" Text="Save New User" CssClass="btn btn-default" />
      </div>
   </div>
</div>

http://jsfiddle.net/8vhxbrxL/[^]
 
Share this answer
 
Posted
Updated 10-Apr-15 6:39am
v4
Comments
Andy Lanng 10-Apr-15 11:33am    
The controls now sit on the same line (whoohoo), but they no longer line up with the other controls (left edge of the textbox is too far right)

I'll add the code for the whole panel to by question
Richard Deeming 10-Apr-15 12:28pm    
You've still got some form-groups mixed with column classes. You'll also need has-feedback for the controls with feedback icons.

I've updated my answer.
Andy Lanng 13-Apr-15 3:56am    
I add the has-feedback with the feedback type in javascript when I remove "display:none".
I will try out the code later today ^_^
Thanks
Andy Lanng 13-Apr-15 4:27am    
The issue does not appear to be your solution (as per my extended question). Your solution tests fine in all tests outside my site so I'll have to find the cause of my issues elsewhere.
Andy Lanng 13-Apr-15 10:57am    
DOH - my label "for"s were not yet set up properly >_<

Now I'm writing the controls as Custom Controls (which fixes the "for" issue) and it all works great.

I see now what you mean by 'don't mix the group classes' I could see the same affects because if this but now I can ^_^
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Spaces for div class using CSS and bootstrap
My ASP.NET razor page not seeing my bootstrap CSS files
Why is bootstrap with CDN so powerful
Add image to a menu item in bootstrap for ASP.NET
Bootstrap display not working in my case why? .
How to use datepicker with bootstrap controls
bootstrap modal box issue in asp.net
bootstrap control and knockout.js
Progress bar status with check using CSS and bootstrap
Issue with my bootstrap meta tag that failing entire site

Advertise
Privacy
Cookies
Terms of Use
Last Updated 13 Apr 2015
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900