CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
krikara
krikara

Reputation: 2435

Cannot move check box to align with my bootstrap textbox

JSFiddle for code, then screenshot of what I see on my screen, since JSFiddle is displaying it wrong :

(entire code in link, brief view below) http://jsfiddle.net/WeDLR/1/ pic1

        <div class="col-lg-3"> 
            <form method =post action="/UnitInfo/TSMServlet" NAME="form01">

                <div class="form-group">
                    <label for="terminalname" class="col-lg-3 control-label">Terminal Name</label>
                        <div class="col-lg-3">
                            <input type="checkbox" class="checkbox" display="inline-block" name="checkbox_tname" onclick="checkbox_tname_click();">&nbsp;&nbsp;&nbsp;
                            <input type="text" class="form-control" name="tname" placeholder="Terminal Name">
                        </div> 
                </div>
        </div>

Currently, my check box is partially under my textbox. I want to make it so the center of the check box is on the same line as the center of the text box. How can I do this?

PS. If I don't use a bootstrap textbox, it seems like my alignment is just fine.

Upvotes: 0

Views: 2853

Answers (2)

Vladislav Stanic
Vladislav Stanic

Reputation: 795

Try this, if its ok I will explain. I did not change any css. See Fiddle.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
  </ul>
</nav>
<br>
<br>
<br>
<br>
<font class="header">
<center>
  <b>Unit Information Filter </b>
</center>
</font><br>
<br>
<br>
<div class="container">
<div class="col-lg-3">
<form method="post" action="/UnitInfo/TSMServlet" NAME="form01">
<div class="form-group">
  <label for="terminalname" class="col-xs-12 col-sm-12 col-lg-12 control-label">Terminal Name</label>
  <div class="col-xs-2 col-sm-1 col-lg-2">
<input type="checkbox" class="checkbox" name="checkbox_tname" onclick="checkbox_tname_click();">
  </div>
  <div class="col-xs-10 col-sm-11 col-lg-10">
    <input type="text" class="form-control" name="tname" placeholder="Terminal Name">
</div>
</div>
<br>
<div class="form-group">
 <label for="tbid" class="col-lg-2 control-label">TBID</label>
 <div class="col-lg-10">
 <input type="text" class="form-control" name="tbid" placeholder="TBID">
</div>
</div>
<br>
<div class="form-group">
<label for="version" class="col-lg-2 control-label">Version</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="version" placeholder="Version">
</div>
</div>
<br>
<div class="form-group">
<label for="lastconnect" class="col-lg-2 control-label">Last Connect Time</label>
</div>
<div class="form-group">
 <label for="from" class="col-lg-2 control-label">From </label>
 <div class="col-lg-10">
<input type="date" class="form-control" name="timefrom" placeholder="FROMdate">
<label for="to" class="control-label">To</label>
<input type="date" class="form-control" name="timeto" placeholder="TOdate">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default" ONCLICK="checkValue();" value="search" CLASS="BTN_MENU" >
Submit
   </button>
 </div>
</div>
</div>

FIDDLE

Upvotes: 0

Nikhil N
Nikhil N

Reputation: 4577

Try following css...

.checkbox {
    width: 100%;
}
.form-group {
    white-space: nowrap;
    display:inline
}
.form-control {
    display: inline-block;
}

Demo Fiddle

Upvotes: 1

Related Questions