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
Related
I have a container that either has one or three sections. Inside each sections I have table and there is list of rows inside the table. I want to make all the height of the sections dynamic such that it occupies the entire space. If there are more tables records inside the section than I need to add scroll to table to scroll records. But at all times the entire height should be filled inside the container. How can I have min and max-height for all sections.
Design scenario If there are 2 sections instead of 3: Red is container and blue are sections which contains table.
The structure
Container
section1
table
section 2
table
section 3
table
height: auto;
Would fill the container, assuming there is enough content to fill the amount of space you want. If you're also looking for consistent space between the content: Flexbox has property called gap that lets you define the space between your sections:
display: flex;
flex-direction: column;
gap: 10px /* an example number, can be anything you want */;
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");
In my application a user is able to input text and click a button to append a new 'span' to the DOM (within a container) containing their inputted text. I want these spans to have as much width as needed to fit the given user inputted text (you can assume the user wont input something longer than the container's width). I would also want the container to fit as many spans as possible within in a row; and if a span needs more room than is left in the current row -> go to the row below (see the last two lines of the picture).
What kind of CSS would I need to add to my container as well as the spans within it to achieve the organization below?
Please Note: the width of this container is fixed, but the height grows as needed to fit new text filled spans
As per you mockup, You can achieve your task by two way:
Use flex CSS3 property
Use CSS3 property width auto and float left in span class.
let span class="class-name"
.class-name {
display: inline-block;
width: auto;
float: left;
}
In this span class, you can add more property as per your need.
To do this with the CSS3 flex property:
.container {
display: flex;
border: 1px solid red;
width: 20rem;
flex-wrap: wrap; /* otherwise it will try to fit everything on one line */
justify-content: space-between; /* alternatives are space-evenly or space-around*/
}
see this pen, with flex you have the advantage that you have better control over how this width of the container is uses, with the float solution you cannot justify the content, it will all stick to the left and leave unused space on the right.
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'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