I'm getting this weird behavior from ui-grid which if I set the rowHeight to auto, each cell in a same row will have different height. One of the cells in each row will have multiline data, but apparently ui-grid will choke on that. (I colored the row so you can see what is wrong!) Any idea how to fix this? I mean to get same height for all the cells in each row. How do you handle different row heights in a same grid?
Use CSS
[ui-grid-row] {
display: table-row;
}
.ui-grid-row, .ui-grid-cell {
height: auto!important;
}
.ui-grid-cell {
float: none;
display: table-cell;
}
.ui-grid-header-cell, .ui-grid-cell-contents {
white-space: normal;
padding: 2px;
word-break: break-word;
}
Use JavaScript
When you are using multiselect the height of the check column don't change, so you can set enableRowHeaderSelection: false. It will hide this column but still you can select the rows or if you want you can use this function from #jibap to align containers http://plnkr.co/edit/JwbEmPhJq2LInfUNncdi?p=preview
Virtualization is pretty much impossible without pre-defined row heights. You'll find the same limitation with any virtualized list tool. Check Ionic's collection-repeat for instance.
The problem is that UI-Grid is only displaying a subset of all the rows at any given time, but in order for it make it appear like all the rows are there it has to create empty space around the rendered rows. If it doesn't know how tall all the rows are, it doesn't know how much empty space there should be.
If you wanted automatic row height it would have to render each row individually, measure it, then sum up all the heights. This would completely thrash the browser.
Related
I have a table that is 650px wide and I add words to this table...each word is in its own cell.
However if I have too many words then it expands the table.
What I want to do is allow it to limit the X and auto go to a new row or under the current content so it doesn't resize the table.
I thought about calculating the width of each cell using JS..but it says each is 0px as the cells are created programmatically using JS.
Perhaps a table is not the best solution for you, since it doesn't have this functionality.
You could try simple <div>'s, they will wrap, but you could also have a look at the newer, and more advanced, Flexbox. Have a look at the Wrapping section on that page.
I got it work by using
#tGrammar {
display: block;
}
#tGrammar td {
display: inline-block;
}
in CSS
and in JS where is tChoicesMain is table
tChoicesMain.style.tableLayout = "fixed";
tChoicesMain.style.maxWidth = "650px";
tChoicesMain.setAttribute("id", "tGrammar");
I've searched tirelessly and although I've found many people asking about this problem, there don't seem to be any consistent solutions.
We have a page on which a user can enter a date range, then press submit to return a table of data. A "print" button exists which obviously prints the generated data.
All browsers seem to be able to split the long table into several pages, as expected. We can also get some predefined footer text to show up on each page by using a footer div with some CSS like this:
.footer {
position: fixed;
bottom: 0;
}
The only problem is that the table rows have inconsistent heights, so on some pages there's plenty of room for the footer, but on other pages the table and the footer overlap.
Things I have tried:
#page {
margin-bottom: 10mm;
}
Adds a margin, but the bottom: 0; fixed position of the footer is now considered to be too high up, i.e. there's still an overlap but with a bunch of space at the bottom of the page. Setting the bottom property to a negative value just makes it appear at the top of the next page instead.
#page {
padding-bottom: 10mm;
}
No noticeable effect at all.
...And that's pretty much all I can think of. What can we do about this? Do we need some kind of custom JS solution to calculate the number of rows on each page and insert a footer manually? There must be somebody who has had success with printing footers; it doesn't seem like an uncommon requirement.
Please try to add this at the bottom of css file or after the last body affecting rule eventually adding also !important:
#media print {
body {
padding-bottom: 10mm;
}
}
There may be a more elegant solution, but you can do this in JS with an algorithm along the lines of:
while there is still vertical room left...
output a row to DOM
measure height of new row and recalc how much vertical room is left
For getting the height of an element, you could take a look at this other answer.
That may seem like a pain, but you'll have a lot of control over your rendering, and it should work fine.
i was having the same problem last day i search for hours to solve it. the solve was
adding these to css.
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
ps: don't add relative position to the table never because it wouldn't work properly.
I am working with dgrid tables. I have a table with single column, and each column cell have some contents within it. When my cell content is really big, i would like to show a scrollbar, so the user can scroll and view the rest of the content. However in my table, the scrollbar does not show in this case, but if i use the dgrid columnResizer to expand the column, then the scrollbar shows up till the expanding width. If the width is less than the content, then the rest of the content will still remain invisible. Here is the jsFiddle.
http://jsfiddle.net/vrwe7dn5/
This is my CSS-
#grid{
width: 20%;
height: auto;
}
.dgrid-scroller{
overflow:auto;
position: relative;
}
.dgrid-content{
white-space: nowrap;
}
Please let me know if i am doing anything wrong.
The class you are using, .dgrid-scroller{} is only for the column. To make the content scrollable, you would have to apply overflow-x:scroll on the td's themselves.
I'm developing a web app with jQuery. I have a table with fixed-width columns, and javascript populated row contents.
Problem: One column has a width of 140px. Most of the sentences in this column are short and fit into this width. The font is NOT monospaced. There are a few long sentences, and there the td's have 2 lines and the height of
the row becomes greater than 20px.
I do not want this to happen, so I have to shorten the long sentences
My first idea was to fill the td with the value and shortly after that to check the height of the td or row. And when the height is larger then 20px I have to shorten the sentence.
But I think this would cause the table rows to "flicker" when the rows get the values.
So the other idea is to make a invisible div or span and to do the same thing described as before.
Is there somebody who did this before and found a good solution for my problem?
There's no way to calculate what the size of the text will be - or at least there's no portable way. You won't even be able to know for sure which font will be used.
What you might do instead is use CSS to force the td to a fixed size and ignore all overflowing text. overflow: hidden should get you going. Might also want to use white-space: nowrap as well.
You could just prevent the resizing with CSS:
table { table-layout:fixed; }
table td, table th { white-space:nowrap; overflow:none; }
What about setting the height of the cell and then using text-overflow: ellipsis?
table td { text-overflow: ellipsis; max-height: 20px; }
EDIT: fixed the fiddle - Here's an example:
JSFiddle - td and ellipsis
I have a table where users input data into columns. Each time the user enters data a new column is created. After a while they have a TON of columns and I need them to wrap.
I know how to wrap the text inside the columns, but I need the entire column to wrap below the first column and so on.
You shouldn't use tables for this.
You should use divs with "float: left" CSS style.
Here is a working example: http://jsfiddle.net/3MEJ5/
Instead of using table columns, try having each input data be a table on its own, wrapped inside a <div class="datainput">, using the following CSS:
.datainput {display: inline-block; vertical-align: top;}
Now, instead of adding a new column, duplicate the container. This will place it next to the existing ones, and wrap if/when needed.
Should it fail to wrap, apply this CSS to the element containing all these containers:
word-break: break-all;
it is actually not simple. The table/row/column structure is quite rigid. To achieve what you describe, you have to create each cell as a single-celled table in a giant outer cell. Then they will wrap. But then, they may not align well.
A good solution for this now is to use CSS3 Columns.
You can set the CSS properties on the container and the children will flow down and across.
You have the options:
div {
/* Make columns with a min width of 100px, create multiple columns as space permits */
column-width: 100px;
column-count: 3; /* Divide the text in a <div> element into three columns */
column-gap: 40px; /* Specify a 40 pixels gap between the columns */
/* Specify the width, style, and color of the rule between columns */
column-rule: 4px double #ff00ff;
}
For more details see: https://www.w3schools.com/cssref/css3_pr_columns.asp
For browser support see: https://caniuse.com/#search=css3%20columns