I'd like to have three cells in a table select the appropriate checkbox when you click on them, so I wrapped them with a label tag.
<table>
<tr>
<td>
<input id="input_id" type="checkbox">
</td>
<label for='input_id'>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</label>
</tr>
</table>
Unfortunately this broke the click functionality. Normally when you click the text in a label it toggle the check, but this doesn't work with wrapped elements. Any ideas why? Should it, or is there some reason this is a bad idea?
Interestingly, it does work if I use three separate labels around the cell contents with the same 'for' attribute....
It's a bad idea to write invalid mark-up as per your example. The only element that should wrap a td is a tr.
As it stands, your example won't break the click functionality, because the td tags will be discarded by the parser.
However, if the example was inside a table and tr element, then the input and label elements would be moved to before the table, and therefore wouldn't be wrapping either the tds or the "stuff" text (which stay inside the table), so clicking on that text will have no effect.
Related
I have a simple table that is burred inside of big HTML file. I do know it has two td elements, the first of which is a header label, like Name and the second is the value. So what I need to do is to get the text of the second td. The problem is HTML is dynamic and the CSS path varies so it inefficient to create a set of CSS paths for each possible case.
It seems like I need to find a tr element that has a td child that has text 'Nameand then take the text of the last child of thattr` element. Something in this direction.
<html>
...
<table>
<tr>
<td>Name</td>
<td>John</td>
<tr>
</table>
...
</html>
I'm fairly sure the CSS dudes decided not to implement a parent selector.
It'd make a really foot gun.
Perhaps you can use some javascript search for and add an 'id' to the table you want to restyle.
I notice that, when text and <input type="text"> fields run in the same line, the two texts are vertically aligned with one another. This in my opinion is a good thing.
This is NOT always the case with text that is laid out in a table with say two columns, labels on left and inputs on the right. Usually, one will be lower.
Without having to micro-manage padding which I'd have to adjust if I ever change font size, is there any elegant way to align vertically regular text in one td, and the value of an input field in the td next to it?
I'm not sure I understand the problem. It looks good to me:
http://jsfiddle.net/54PK9/
outside table <input type="text" value="test" />
<table>
<tr>
<td>
inside table
</td>
<td>
<input type="text" value="test" />
</td>
</tr>
</table>
Perhaps you can fork the above fiddle and show us what you mean?
However, if you need to adjust, say, inputs inside a td, something like this should work without having to adjust too much (note: .1 may be not quite the right number):
.table-with-a-certain-class td > input
{
margin-top: -.1em;
}
I've set up a fiddle with a table.
You see, Im trying to make a table where the user will hover and click the td to show an id. Check the fiddle out and you'll understand.
Now, When the user hovers Parent4, you may notice there's space on the table where there's no text and the user can't click it so the Child4 wont appear....
Now, is there any way I can make the space where there's no text clickable so it shows up child4?
I tried
<td ahref="#child4"> but didn't work...
////?EDIT As its a bit confusing...
I need you to see the fiddle.
You can see the cell for Parent4 is bigger than the text. So when the user hovers on the cell I want the text to change color and the cell to change color too + if the user clicks the cell Child4 won't appear because a cell is unclickable, so My question, how can I make the cell clickable to display Child4?
UPD:
I didn't update the fiddle, but it's now up to date.
The href property is designed for anchor elements (<a/>). "ahref" as you've put should be <a href="">. a is an element of its own, not a HTML attribute, and href is an attribute it accepts.
To make the text of a td clickable you can simply put an anchor within it:
<td>
My clickable text
</td>
Edit: To fix this now that the question has been added, simply add in the following CSS:
td a {
display:block;
width:100%;
}
What this does is display the anchor tag as a block, allowing us to adjust the width, and then set the width to 100%, allowing it to fill the remaining space.
Working JSFiddle.
Add the onClick event on the td mark.
<td onClick="document.location.href='http://www.yoursite.com';"> some text here </td>
There is a very simple way of doing this with just HTML. Put the link text inside a DIV. The DIV occupies the whole TD and makes it all clickable.
<a href="http://whatever.com">
<div>
Link Text
</div>
</a>
If you're trying to make an area clickable with no text, you can define the size of the tag like so:
This will create the block without any object or text inside.
Just wanted to add two ways that actually worked inside the for me:
Using Angular 5:
a. in [yourname].component.html:
<table id='myTable'>
<tr><td (click)="myClick()">my cell</td>...
b. In [yourname].component.ts: (inside your exported class.. )
simply implement the needed function..
export class [youyname].... {
....
myClick() {
}
}
Pure JS:
<script>
function myClick(){
console.log("got here");
// Do Whatever you want
}
</script>
<div id='myDiv'>
<table id='myTable'>
<tr><td onClick="myClick()">Yo..</td><td>....
The easiest way..
(Note: It's possible to put the script inside the tag, or even load an external JS file inside it, but I don't like doing it like that.)
Very Simple way is just adding onClick='myFunction()'
Ex:
<table>
<tr>
<td onClick="myFunction()">hello</td>
</tr>
</table>
If using pug/jade try the following;
tr(onclick="document.location.href='http://www.google.com';")
td.py-2.align-middle
Simplest thing would be to populate the "empty" cell with:
That should do the trick for you.
So I have two fieldsets, wrapped in in one label that I want to display adjacent to each other. Here's my code: fiddle
So the two fieldsets containing the input boxes and instructions respectively should appear side-by-side. What should I change/add in my code to make it work? Thanks
having the fieldsets float: left; will work fine.
look at this: http://jsfiddle.net/5brSk/2/
You will have to make sure that the container of your 2 fieldsets is large enough to hold both fieldsets next to each other, otherwise it will break (again).
If you want the two fieldsets side by side, you can use a table structure
<label>
<table>
<tr>
<td>
//field set 1
</td>
<td>
//field set 2
</td>
</tr>
</table>
</label>
Add some css to fix it in the end.
And technically there is no need for the label tag.
Do the fieldsets styled as display: inline-block; ( http://jsfiddle.net/5brSk/16/ ) to get them side-by-side, and don't use a label as the parent - use it's form or a div / span. There are countless other things that make your code invalid though (duplicate IDs etc)
I have html code like this
<tr class="odd">
<td><b>Reason for Termination:</b></td>
<td>this has bunch of reasons like reason 1, reason2, reason3, reason 4, reason 5 etc</td>
<td></td><td></td>
</tr>
I want the second TD tag to have some sort of predefined word break. so that when the page is loaded there would be an 'end of line', so to speak, after, say, reason 2.
can html be used here?
Edit:
I am not referring to <br>. The content loaded into the tr tag is coming dynamically so I wont know where to put the 'br'. I am looking for a way to cut off the text at a given width so that it rolls over to the next line
You need the <wbr/> tag. It suggests to the browsers where you would like a break to occur. You can insert it anywhere you like, and the text should wrap on that position.
Style the second <td> with a width.
<tr class="odd">
<td><b>Reason for Termination:</b></td>
<td class="reason_width">this has bunch of reasons like reason 1, reason2, reason3, reason 4, reason 5 etc</td>
<td></td><td></td>
</tr>
and
.reason_width { width: 300px; }
This will wrap the second <td> at 300 pixels.
Are you talking about line break?
<br />
Also if you specify a width to that column. It should wrap accordingly.
You should set the width of the td containing the words to a specific size using css.
The only way to break a line before it gets to the end of the table cell is to use a <br /> tag.
Since you don't have control over the content, this is impossible to achieve.
As an alternative to the <wbr /> tag you can also wrap the text that needs to stay together (for example the individual reasons) in spans and give the span a
span {
white-space: nowrap;
}
The tag is used for line breaks, as you can see.
That is, the <br> tag.
Also, depending on which type and version of HTML you are using, you may need to use <br />.