I have a table, one column of which contains only a checkbox and I am currently centering these with
<td style="text-align:center; vertical-align:middle;">
<input type="checkbox" name="xyz">
</td>
Now I want to add some JS to (de)select all/none, so I want to add a checkbox in my table header row, along with some text
TH is, by default, bold and I am happy leave it so for actual Column header text, bu I was normal text for the "all/none" and then I want a centered checkbox below that.
----------------
| Search ? | Next column
| (all/none) |
| [x] |
here's my code - how do I get that checkbox to center?
<th>Search?<br>
<span class="th_not_bold">(all/none)</span><br>
<input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()">
</th>
try using
<th>
<td style="text-align:center; vertical-align:middle;">
<div>Search</div>
<div class="th_not_bold">(all/none)</div>
<div><input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()"> </div>
</td>
</th>
You would do exactly the same thing you did for your other <td> - you would set text-align center; vertical-align: middle; on the <th>, and you wouldn't need to apply any properties to the checkbox:
Here's an example of the code you'd use:
th{
text-align: center;
vertical-align: middle;
}
You can use text-align:center. Here is what is looks like: http://jsfiddle.net/RcztD/1/
<html>
<head></head>
<style type="text/css">
.center{
text-align:center;
}
</style>
<body>
<table border="1">
<tr>
<th valign="top" class="center">
Search?<br />
<span class="th_not_bold">(all/none)</span><br />
<input type="checkbox" name="search_all" id="search_all onClick="ReportAllNoneClicked()" />
</th>
</tr>
</table>
</body>
</html>
Related
I'm currently building an email template. The template contains USP's that are lined next to each other. This is the code I'm using:
<td width="100%">
<span style="white-space: nowrap;">
<img src="checkmark.png" /> [text name="USP1"]
</span>
<span style="white-space: nowrap;">
<img src="checkmark.png" /> [text name="USP2"]
</span>
<span style="white-space: nowrap;">
<img src="checkmark.png" /> [text name="USP3"]
</span>
</td>
With the "nowrap" I'm trying to put the USP's underneath each other on smartphones. Too bad the USP's all stand next to each other, which makes the table wider.
Is there a simple inline-CSS trick to make them stand under each other on small screens?
HTML:
<td class="usps">
<span>...
</td>
CSS:
table tr td.usps span {
display: block;
}
I have an advanced search form (click "Advanced search") here in Dupal 7 - http://www.ibuild.ph/mtf-rdp-minimal/search/node and contact form here - http://www.ibuild.ph/mtf-rdp-minimal/contact. The search fields are inline, while the contact fields are positioned below the labels.
Is there a way to inline position the fields with the text labels and make the fields aligned vertically with each other without separating the text labels and form fields in two divs?
Using table
You can change width of label by changing width: 100px;
<table style="width: 100%;">
<colgroup>
<col style="width: 100px;">
<col>
<colgroup>
<tr>
<td>Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" /></td>
</tr>
</table>
Using min-width:
<div>
<label style="display: inline-block; min-width: 100px;">Name: </label><input type="text" />
</div>
<div>
<label style="display: inline-block; min-width: 100px;">Address: </label><input type="text" />
</div>
You could do either of these things:
Make a <table> with two columns instead of your <fieldset>.
Put the <label> elements in the first column and <input/> elements in the second column. The table will automatically align the column widths to the largest element in that column.
OR
You could add this to your css:
fieldset.search-advanced label{
min-width:200px;
}
Thanks, Thi Tran and FactoryAidan. Will try customizing Drupal's webform tpl instead. But your answers will definitely come in handy in customizing the template.
Here is the link to the resource I have found - http://cgit.drupalcode.org/webform/tree/THEMING.txt?id=HEAD
When I add a .group-addon to an element inside a bootstrap .table, all other elements are not given enough space, and the group-addon input takes up far too much room.
<h2>Only one bully, group-addon</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
<div class="input-group-addon">x</div>
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<h2>Two bullying group-addons</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">x</div>
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
<div class="input-group-addon">x</div>
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<h2>No Bullies</h2>
<table class="table">
<tbody>
<tr>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>
<div class="input-group">
<input id="cool" class="form-control">
</div>
</td>
<td>pushed around...</td>
<td>being bullied...</td>
<td>by group addons...</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">When there is no group-addon inside a table with class table, the spacing looks reasonable, but a single group-addon ruins it all</div>
http://jsfiddle.net/billymoon/ntm2q/
How should I use group-addons inside bootstrap tables without them taking too much space?
Try in your Less / CSS:
.input-group-addon {
width:auto;
}
The problem is in your bootstrap.min.css line 9 where you have this rules:
.input-group-addon, .input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
You should erase width: 1%; or just override with something like this:
.input-group-addon {
width:0;
}
DEMO
I'm doing my first piece of HTML & CSS today, and I'm having trouble trying to move a div. I read some tutorials on CSS and tried to replicate what I've seen. But for some reason I cannot get the div to move.
Can anybody set me straight as to what I've done wrong please?
CSS
#seax {
position:static;
top:400;
left:400;
}
HTML
<div id="seax">
<form autocomplete="off" method="post" action="/search.html">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</form>
</div>
Change position:static; to position:relative;. Static position displays the div in it's default position, which is as it'd appear in the document flow you see.
Add "px" to your CSS, and use absolute
#seax {
position:absolute;
top:100px;
left:100px;
}
http://jsfiddle.net/djwave28/tnvQz/
It really depends on how you want to position the div.
position: static; is definitely your issue, as static position (as #Omega noted) displays the div in it's default position. You mean to write either position: absolute or position: relative. The difference between the two is best outlined here but I'll give you a tl;dr.
position: absolute positions the div relative to the whole page, whereas position: relative positions it relative to the parent.
Also, you are missing px at the end of your top and left property values (i.e top:10px; and left:10px;)
Give the div a position of absolute
#seax {
position: absolute;
top:400;
left:400;
}
Try changing
<div id="seax"></div>
to
<div class="seax"></div>
and
#seax {
position:static;
top:400;
left:400;
}
to
.seax {
position:absolute;
top:400px;
left:400px;
}
if you want to use seax for multiple elements.
You could even try:
<form autocomplete="off" method="post" action="/search.html">
<div class="seax">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</div>
</form>
That should fix it. Otherwise your HTML document should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.seax {
position:absolute;
top:400px;
left:400px;
}
</style>
<body>
<div class="seax">
<form autocomplete="off" method="post" action="/search.html">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-
autocomplete-input" autocomplete="off" role="textbox" aria-
autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif"
value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
I have this div that is showing the products for an e-commerce site.
I have it well alligned with css and a table inside it, but using tables for content seems to be frowned upon/not the best so I'm trying to do it correctly, hasn't worked out so far. The products div looks like this:
Crude unedited screenshot : http://img255.imageshack.us/img255/6832/printt.png
That is the look I want. I tried nesting 2 divs in the products div, one floating right with the image, title and description, the other one floating right with the table elements.
Thought I had worked it out to a decent look on some pages, but on others (displaying other products) it looks different and messed up. I'm thinking this is due to the fact the links were taking on the width of the whole products div, ending up over the right div.
How do I stop that behavior, I want the links to wrap around the text maybe the problem would go away then. Or are you suggesting something else?
HTML looks like this :
<div id="products">
<img src="fetch.php?id=4" width="129" height="129" alt="PRC200" />
<h3>PRC200</h3>
<table border="0">
<tr>
<td><h4>100,00 RON</h4></td>
</tr>
<tr>
<td class="out">Indisponibil</td>
</tr>
<form action="" method="post">
<tr>
<td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
</tr>
</form>
<form action="detalii.php" method="get">
<tr>
<td>
<input type="hidden" name="id_produs" value="4" />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</td>
</tr>
</form>
</table>
<p>M-am saturat de atatea litere si numere</p>
</div>
Here is a tableless solution. Keep in mind take the tags and place them in an external CSS file. By using a tableless structure you'll see how much more condensed the code is.
<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }
</style>
<div id="products">
<div class="product">
<div class="purchasedetails">
<h4>100,00 RON</h4>
<p>Indisponibil</p>
<input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</div>
<div class="productimg"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></div>
<h3>PRC200</h3>
<p class="description">Insert Description Here</p>
<div style="clear:both;"></div>
</div>
</div>
I only have this nexted inside the <div id="products"> because it was listed in your code. The inside products div would essentailly fill whatever content area it is placed in whether it is a <td> or<div>