CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Adam
Adam

Reputation: 10016

text and checkbox on one line within a table cell, bootstrap

This is what my table looks like right now:

enter image description here

I want the checkbox to be on the right of "CMPT 310" instead of below it. I can't simply make the text a label for the checkbox because when I click on the text I want a description of the course to pop up (ie I don't want to checkbox to be checked). Here is how I'm implementing the problem cell in the table right now (using bootstrap):

                <td>
                        <p data-toggle="modal" data-target="#CMPT310">CMPT 310</p> 
                        <div class="checkbox">
                        <label>
                          <input type="checkbox" value="">
                        </div>                                              
                </td>

And here is the rest of the page for reference:

<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12"><img src="images/title.png" class="img-responsive"></div>
		</div>
		<div class="row">
			<h4><strong>Table I: Computing Science Concentrations<strong></h4>
		</div>		
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>Artificial Intelligence</th>
					<th>Computer Graphics</th>
					<th>Computing Systems</th>
					<th>Information Systems</th>
					<th>Programming Languages and Software</th>
					<th>Theoretical Computing Science</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
							<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p> 
							<div class="checkbox">
						    <label>
						      <input type="checkbox" value="">
  							</div>												
					</td>
					<td>CMPT 361</td>
					<td><strong>CMPT 300</strong></td>
					<td>CMPT 301</td>
					<td>CMPT 373</td>
					<td><strong>CMPT 307</strong></td>
				</tr>
			</tbody>
		</table>		
	</div>


	<!-- START MODALS -->


	<!-- CMPT 310-->
	  <div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	      <div class="modal-content">
	        <div class="modal-body">
	          <img class="img-responsive" src="images/cmpt310.png">
	        </div>
	        <div class="modal-footer">
	          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>         
	        </div>
	      </div>
	    </div>
	  </div>

</body>
</html>

Thanks

Upvotes: 2

Views: 3311

Answers (1)

m4n0
m4n0

Reputation: 32275

Set the p and checkbox inside the td element to be displayed inline.

td p,
td .checkbox {
  display: inline;
}

td .checkbox {
  margin-left: 5px;
  margin-top: 0;
  position: absolute;
}


td p,
td .checkbox {
  display: inline;
}
td .checkbox {
  margin-left: 5px;
  margin-top: 0;
  position: absolute;
}
<html>

<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <img src="images/title.png" class="img-responsive">
      </div>
    </div>
    <div class="row">
      <h4><strong>Table I: Computing Science Concentrations<strong></h4>
    </div>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Artificial Intelligence</th>
          <th>Computer Graphics</th>
          <th>Computing Systems</th>
          <th>Information Systems</th>
          <th>Programming Languages and Software</th>
          <th>Theoretical Computing Science</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">
            </div>
          </td>
          <td>CMPT 361</td>
          <td><strong>CMPT 300</strong>
          </td>
          <td>CMPT 301</td>
          <td>CMPT 373</td>
          <td><strong>CMPT 307</strong>
          </td>
        </tr>
      </tbody>
    </table>
  </div>


  <!-- START MODALS -->


  <!-- CMPT 310-->
  <div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <img class="img-responsive" src="images/cmpt310.png">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Upvotes: 1

Related Questions