When using textarea fields in a row, the row can become very tall in height. Is there a way to initially set a max-height of cell/rows and just make them bigger when necessary?
To extend on your initial answer, that wont work for all rows if you have the virtual DOM enabled.
It is extremely bad practice to try and manipulate elements inside the table as they could be replaced at any time, tabulator only renders the visible rows, others are created and destroyed as the table is scrolled so trying to apply heights like that will not work reliably in most cases.
In your case I would suggest setting it in CSS after you have imported the tabulator.css file:
.tabulator .tabulator-row tabulator-cell{
height:24px
}
So I have two tables horizontally next to each other. Everything is aligned initially. However, when the element inside one cell of the left table increases in size, it wraps and increases the cell height. How can I align two tables even with the left cell height increased?
Here is the image of what it looks like:
Without wrapping:
With wrapping:
IMHO you have two options.
Use single table so that entire row will have same height. Or
Use div instead of table because div has overflow option. Refer this link
Update after comment:
If you can use jquery, you could do it on page load. Refer this fiddler
Note: height attributes for both table's row and class name. Un-comment jquery line number 3 and execute.
I have two tables sit next to each other and display data about two items that are being compared. Each item has a name, a category, and then a description - some descriptions (the third column) are very short (one word) and some are very long (multiple sentences). I need to align the two tables so that the row heights match up perfectly. Here's what I have so far:
Notice how the first row in each table doesn't align because of the difference in heights in the row. Ideally I'd love to solve this with CSS and some kind of overflow property combined with min-height, but I'm not sure where to start. Thanks!
You can place the description text (2nd table) inside a "div" in "td" and
make the "div" css: "overflow:auto; max-height:40%"; and make changes to the width of the table data as required for the both tables.
You can use the height property to give each cell in the table a uniform height.
Setting the overflow-wrap property to break-word will break a long word that does not fit inside the cell (like supercalifragilisticexpialidocious) so it fits. You need to style it as an inline-block so the overflow works properly. If all else fails and there is just too much darn text in a table cell, you could set overflow to hidden to make sure that your users can at least see the content without it spilling over everything, but ideally you should set the height to be large enough for your data. If you need an example, let me know and I can post one.
Like in this demo
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx
Except In this demo it's being added as an additional row. (click one of the ">" things and check the page source, it added a new row to the table). If I used this strategy, It would be difficult to sort, using a standard Jquery plugin, like table sorter.
Ideas?
went away and did some thinking about my comment, about finding row height and overlaying the div.. it's so close, but I'm no jQuery whiz, so perhaps someone can help tidy this up
I have it showing/hiding the div in the right position IF the div/row is closed before the next one is opened.. but if you click button 2 while div one is opened is doesn't get the right top position (it gets the position the row was at after being expanded not the original row position), I'm sure there must be a way to get that position while the rows are not expanded and store it??
anyway have at it.. I know it's very long-winded, variable wise, because I can only apply the CSS logic - I don't know enough about js or jquery functions and storing.. also I thought if I explained how I got to my variables and which ones were needed it might help those who do know how to make this better ;)
the input/buttons have no text but they're the click trigger
position() is maybe not the right thing to use, it needs for the div to be able to find the original position of the related row (inside table-wrap div?)
?
here's the Example
You can't. A <div> is not a valid child of <table> or <tbody>. You'll need to use a <tr>.
I don't know how that plugin works, but perhaps there's support for sorting multiple <tbody> elements, which would allow you to group your sets of rows.
That div is inside a td which is hidden until you click the >
Here is a demo: http://jsfiddle.net/maniator/7RLhL/1/
I don't know if you can do that. Putting a tag like inside a table isn't valid (X)HTML, and so probably won't give you the effect you were looking for
If you look at that demo, they're using a second <tr> below the first one with a <td> that spans most of the columns.
You can embed a detail table inside a table cell under each description cell which will be not visible and make it visible on tr click:
http://jsfiddle.net/bouillard/QmK4Z/
As mentioned in other answers, we cannot add a div inside the table without it being in a TD. However, there might be something that can be done to place the div over the row. To have the effect of the div being shown as inside the row, we could increase the height of the row while the div is being shown. Here is the very basic demo. Since the div is not really inside the table, if the table happens to sort, you would probably want to hide the div or relocate it to the new TR location. It would present its own challenges but you could play with it and see if it works for you.
I have an idea. It's really ugly. The only think I could think of doing is before sorting the rows, detach the additional rows(with the div) and use JQuery to store it somehow. Then after the sorting is done reattach the rows(with the div) in the right place(s).
That could, no I should say WILL, get ugly really fast, especially with paging and filtering...
You can use getBoundingClientRect to get the element's position and then set those values to a div css position left and top. Must also take into account the window scroll as getBoundingClientRect will return it relative to the window viewport.
The following example will locate a div named #tooltip under any tr row when hovering over it. I'm using jQuery for convenience but you can translate to vanilla JS easily.
<script>
$("tr").hover(
function () {
const row = this;
const bounds = row.getBoundingClientRect();
tooltip.css({
left: bounds.left + window.scrollX,
top: bounds.bottom + window.scrollY
});
},
function () {}
);
</script>
<table> ... </table>
<div id="#tooltip"> ... </div>
Be sure to make div positioning absolute and also to skip pointer events or the div will block hover events from reaching the table elements.
<style>
#tooltip {
position: absolute;
pointer-events: none;
}
</style>
Good luck!
Can I determine the actual padding in effect for a cell?
I know about style.leftPadding, for example, but AFAICT that only reflects a padding value that was explictly set with in-line styling or javascript. It does not seem to reflect padding that was applied by style sheets.
I also know about clientWidth and offsetWidth, but I don't think those are useful either.
Thoughts?
you can get the table cell padding(inner) by document.all.youtableid.cellPadding
or you can move through the every cell by dom and get the padding