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
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");
Sorry, my english is not good :)
When resize the width of the window. How width of dm2 is dependent on the to-n sorted column?
dm1,dm2 is no fixed width in css.
I tried to use text-align for dm1. display: inline for dm2. It works fine, but I found it at fault. I do not know no other way handle it?
Demo Here: https://jsfiddle.net/bindo1995/m4vajbqw/2/
Default
Use text-align for dm1, display:inline; for dm2
How ?
Thanks for helping me !
The problem is that using float or display: inline-block; to-n blocks will always try to fit horizontally on one row when there is enough space for each block and when there is no space for a block it will be on the second row and there will be gap in dm2. If you want them to be 3 on first row and 2 on the second and to fit 100% in dm2 you have to make 2 rows of to-n blocks.
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.
I have column with width 200 px, i cell is containing text longer than appx. 30 chars is text broken into two lines which is not looking good.
I would like to ask, how i can trim cell value to the given maximal length?
I can do it in template but it should be changed in all columns.
Is there any configuration directive for this?
Many Thanks for any advice.
There is not straight-forward configuration in Kendo. You can achieve this using CSS.
You can show elipsis (...) for large text in cells :
.k-grid td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
to show the complete cell text, you can either use Tooltips or Modal popups depending upon your requirement.
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