Hi all, I've been having some issues trying to fix the layout of my page
using the "cosmo" bootswatch template. I am designing a piece of software
for a project for school, and all of the PHP and SQL hasn't been that bad,
but actually getting this thing to look right after everything is a bit
difficult.
What I'm trying to do:
I have a div that's centered in the screen that spans 8 with a button
group.The primary button accordions the table of information I have under
it, and the secondary button houses a drop down menu that allows a user to
edit the contents of the table. The table manages to span8 without a
problem, but I can't get the primary button to be long enough without
giving it exact pixels. Obviously the pixels don't render appropriately on
all browsers and monitor sizes so it's less than ideal. Hoping someone can
help me to get my primary button the entire length of the table.
Here's a snippet of code.
<div class="row-fluid">
<div class="span2"></div>
<!-- EMERGENCY INFO -->
<div class="span3">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" >
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
</ul>
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#emergency">
Emergency Contact
</button>
</div>
<div id="emergency" class="collapse in">
<table class="table table-bordered">
<tr>
<td><strong>Name: </strong></td>
<td><?= $emergencyName ?></td>
</tr>
<tr>
<td><strong>Relation: </strong></td>
<td><?= $emergencyRelation ?></td>
</tr>
<tr>
<td><strong>Phone #: </strong></td>
<td># When in DB</td>
</tr>
</table>
</div>
</div>
<!-- End Emergency Info -->
<div class="span1"></div>
<div class="span4">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" >
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
</ul>
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#insurance">
Insurance Information
</button>
</div>
<div id="insurance" class="collapse in">
<table class="table table-bordered">
<tr>
<td><strong>Name: </strong></td>
<?php if (!empty($emergencyName)) : ?>
<td><?= $emergencyName ?></td>
<?php elseif(empty($emergencyName)) : ?>
<?php if($role==2) : ?>
<td>
No emergency contact listed. Please add this information!
</td>
<?php elseif($role==1) : ?>
<?php endif; ?>
<?php endif; ?>
</tr>
<tr>
<td><strong>Relation: </strong></td>
<td><?= $emergencyRelation ?></td>
</tr>
<tr>
<td><strong>Phone #: </strong></td>
<td># When in DB</td>
</tr>
</table>
</div>
</div>
</div>
