I dont have much experience with CSS, but I am trying to help a friend format a table using CSS. Right now I got stuck trying to format table width, here is an example of the table:
https://form.jotform.com/53306318713148
If I want to change the input of all the fields I can just
table input {
width: 100px;
}
But now we want to have different input sizes for each one of the columns, so after reading about CSS selectors I was trying something of the following:
#cid_1 [id$=_1] {
width: 100px;
}
The thought was that I would select the element with id cid_1 and the the children of that element ending with id _1, but that does not seem to work. Seems like a most element solution would be to use some kind of :nth-child(). Probably a stupid question, butI was hoping someone could show me how to do this.
You can use css3 nth-child selector using this format:
table tr td:nth-child(2) input {
background-color: red;
}
In the example above, the background color of the input inside the second column of each row will become red.
And in your case, you can say:
table tr td:nth-child(2) input {
width: 100px;
}
table tr td:nth-child(3) input {
width: 200px;
}
....
the selector's argument starts with 2, because the first one is labels for each row.
here's a working example
Your css does work, as you can see from this html dump.
#cid_1 [id$="_1"] {
border: 1px solid red;
width: 100px;
}
<ul class="form-section page-section">
<li class="form-line" data-type="control_matrix" id="id_1">
<label class="form-label form-label-top" id="label_1" for="input_1"> </label>
<div id="cid_1" class="form-input-wide jf-required">
<table summary="" cellpadding="4" cellspacing="0" class="form-matrix-table">
<tr>
<th align="left" class="form-matrix-row-headers">
Service Quality
</th>
<td align="center" class="form-matrix-values">
<input id="input_1_0_0" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
</td>
<td align="center" class="form-matrix-values">
<input id="input_1_0_1" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
</td>
<td align="center" class="form-matrix-values">
<input id="input_1_0_2" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
</td>
<td align="center" class="form-matrix-values">
<input id="input_1_0_3" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
</td>
</tr>
</table>
</div>
</li>
</ul>
Related
I'm trying to find a solution to laying out forms in our app (ported from Silverlight). We like labels to up, are trying to do this without tables, but there's a fundamental problem that tables solve I'm not sure how to address any other way.
Here is an example (plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
We have two groups of "label: input" lists, each with their own headings. The leftmost-column adjusts to the width of the widest label in either group, and simultaneously each row also adjust to the height of the tallest element.
How do I achieve this same behavior without tables? When people are talking about "tableless" layout, is that only for things that don't care about content size for their layout?
EDIT:
Uh, sorry. You actually can do more than two elements per line, but (as usual with float: right) you have to put them in reverse order.
If you must not use a table: Add a div for each row and put a invisible horizontal rule between them to keep them from piling onto each other. Also: a float: left to the labels and a float: right to the input boxes. It works, but I would not know how to make a line with three or more elements, like: Born on: Month/Day/Year, work.
Anyway, here is how you can do it.
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
I am trying to make the following working the way I want it to. I want to have an Input element changing its width to the provided cell's width. Here is code:
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<div style="width:100%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</div>
</td>
</tr>
</table>
I want the input in the last cell to take all the width of the cell it's in.
Unless I provide a width of the input it's not happening.
Put width: 100% on the input element itself, not on a div surrounding it (you can get rid of that div altogether in fact).
Demo: http://jsfiddle.net/1qda1jpx/2/
table {
border: 1px solid blue;
}
td {
border: 1px solid lightgray;
}
input {
width: 100%;
}
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</td>
</tr>
</table>
You need to set width: 100% for that input element. Otherwise it wont happen.
I have an issue formatting some HTML. Basically I have a large number of listboxes which are hidden once the page is loaded, and have placed them in HTML tables for now. I am aware that this is not good practice, but this is how I have received them and since there are over 100, I cannot realistically change their HTML code.
I would like for the </hr> and two buttons on the right of the image, to appear under the listboxes.
Here is a jsfiddle of the code.
How can this be formatted for the buttons to appear underneath, regardless of the height taken up by the listboxes? i.e. they will always appear underneath.
You just need to tell the browser to ignore the floating set by the the div surrounding the table:
#divButtons{
clear:both;
}
#divButtons input[type="submit"]{
float:right;
}
Please note that this solution "inverses" the order in which your buttons are displayed. You might need to change their position in your HTML.
Or something like this
#divButtons{ width:100%; float:left }
http://jsfiddle.net/9BBKp/
Here is demo
try this:
<form>
<div style="padding-top: 2%; float:right;clear:both;"> <b>Select Product:</b>
<select name="cmbProducts" onchange="javascript:setTimeout('__doPostBack(\'cmbProducts\',\'\')', 0)" id="cmbProducts" style="width:250px;"></select>
</div>
<div style="padding-top: 50px;">
<hr />
<div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxTerminalType" id="listBoxTerminalType" class="list-box"></select>
</td>
</tr>
</table>
</div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxVoltageAndSuitableLamp" id="listBoxVoltageAndSuitableLamp" class="list-box"></select>
</td>
</tr>
</table>
</div>
</div>
<hr />
</div>
<div id="divButtons" style="text-align: center;">
<input type="submit" name="btnResetSelections" value="Reset Selections" id="btnResetSelections" />
<input type="submit" name="btnApplyFilter" value="Apply Filter" id="btnApplyFilter" />
</div>
</form>
and css:
.list-box {
width: 250px;
}
.selection-panel {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 100px;
align-content: center;
text-align: center;
}
#divButtons {
float:right;
clear:both;
}
I have following markup
<div class="dc2-search-form">
<table width="100%">
<tbody>
<tr>
<td>
<div class="search-form-label">
<span id="StreetAddress_Label">Address</span>
</div><br>
<input style="height: 10px; width:80px" tabindex="0"
type="text" value="">
</td>
<td>
<div class="search-form-label">
<span id="Sales_Cycle_Label">Sales
Cycle</span>
</div><br>
<input style="height: 10px; width: 80px;" tabindex="0" type="text" value="">
</td>
</tr>
</tbody>
</table>
And following CSS
.dc2-search-form {
overflow-x: scroll;
}
.dc2-search-form table {border-collapse:collapse;border-spacing:0;border:0}
.dc2-search-form .search-form-label{font-size:13px;background-color:#BFBFBF;padding:10px 0 10px 1px; border-top:1px solid black;border-bottom:1px solid black;}
.dc2-search-form table select,input{height:10px;font-size:10px;padding:2px;}
Here is the jsfiddle for reference
It gives me the desired output except for a tiny bit space between table cells. I need to make the span div appear as seamless one row with border on top and bottom but I am to able to accomplish that due the space.
How to remove the space between them.
Apply no padding to your table cells:
.dc2-search-form table td{padding:0}
JSFiddle
add cellspacing=0 cellpadding=0 to your table
update fiddle
<table width="100%" cellspacing=0 cellpadding=0>
Try setting the cellpadding and cellspacing to 0, like this:
<table cellpadding='0' cellspacing='0'>
...stuff...
</table>
I have a simple HTML form. I'd like the right widgets in the second column (text field, combox, and so on) to stretch and fill the full column.
My HTML looks like this:
<table class="formTable">
<tr>
<td class="col1">Report Number</td>
<td class="col2"><input type="text"/></td>
</tr>
<tr>
<td class="col1">Report Type</td>
<td class="col2"><select></select></td>
</tr>
</table>
My CSS looks like this:
.formTable {
border-color: black;
}
.formTable td {
padding: 10px;
}
.formTable .col1 {
text-align: right;
}
.formTable .col2 {
width: 100%;
}
Any ideas?
You can specify that all of the children of class "col2" have a width of 100% by adding the following:
.col2 * { width:100%;}
See my dabblet example: http://dabblet.com/gist/2227353
Start with semantic markup since this isn't tabular data. Also, with added labels, we don't need extra wrapper DIVs, which is cleaner.
<ul class="formList">
<li>
<label for="input_1">
Report Number
</label>
<input id="input_1" name="input_1" type="text" />
</li>
<li>
<label for="input_2">
Report Type
</label>
<select id="input_2" name="input_2"></select>
</li>
</ul>
Then add the CSS:
.formList {
border:1px solid #000;
padding:10px;
margin:10px;
}
label {
width:200px;
margin-left:-200px;
float:left;
}
input, select {
width:100%;
}
li {
padding-left:200px;
}
JS Fiddle Example: http://jsfiddle.net/6EyGK/
You can use:
.col2 * {
width: 100%;
}
To match any .col2 descendant. as you can see here. Or:
.col2 > * {
width: 100%;
}
To match just the immediate children.
if using Twitter Bootstrap:
and input is inside a column
just add to <input> the class="container-fluid"
Note
This is not an answer, but a comment, which includes too much code to go into the comment section. So please refrain from downvoting me, would you? :)
Other semantic markup additionaly to Matthew Darnells answer:
If you wrap the labels around the inputs and selects, you can avoid using the forand id attributes.
<ul class="formList">
<li>
<label>
Report Number
<input name="input_1" type="text" />
</label>
</li>
<li>
<label>
Report Type
<select name="input_2"></select>
</label>
</li>
</ul>
Or use a definition list which might give you additional control
<dl class="formList">
<dt>
<label for="input_1">
Report Number
</label>
</dt>
<dd>
<input id="input_1" name="input_1" type="text" />
</dd>
<dt>
<label for="input_2">
Report Type
</label>
</dt>
<dd>
<select id="input_2" name="input_2"></select>
</dt>
</dl>