I have a bootstrap model, which contains a 3 column layout. Each column contains a table with several tbody elements. The last column may contain hidden table elements (generated with style: 'display:none').
If all elements of the last column are hide, I want the modal to resize to fit to the smaller content. Currently the width stays the same, whatever content is displayed. How can I get such a behaviour?
you could try to actually give those columns a class and set their width to 0 or 1 px...
.one-wide { width:1px; }
<th class="one-wide">
But that is how i would solve it, since i like classes better anyway, you can just give them the display none as well.
Related
I have a div #customers_table which contains several <div> columns. I am not using any <table>, rather I make my inner divs behave like a table columns. These columns/data is coming from database. So the columns can be less or more depending on what you choose to add or remove in this web page.
I can't set a fixed width to #customers_table as I explained above we don't know in advance how many columns are going to display. So I wanted a horizontal scrollbar when the columns are enough to view in screen. The horizontal scrollbar will appear when the columns are out of viewpoint.
A sample extracted part of my HTML:
<div id="customers">
<div id="customers_table">
div columns
div columns
div columns
...
...
...
</div>
</div>
To achieve this, I wrapped my #customers_table div within a parent div #customers. I have applied following CSS to these 2 divs:
#customers {
overflow-x:auto;
overflow-y:hidden;
width:100%;
}
#customers_table {
border:1px solid red;
min-width:1500px;
padding:5px;
}
You can see that I am applying a min-width of 1500px. Though it does work when I add 2 or 3 more columns from my website. But when I add more and more columns the columns headers/divs are screwed up and break to second line.
Please see the screenshots below:
This is fine (when columns are less):
We can scroll through to see hidden data.
But when we add more and more columns then this issue arises:
I can't increase min-width since I don't know how many new columns will come in this table. So what is the solution to this problem so that the end result should match with my first screenshot irrelevant of the fact how many new columns a person can add?
Backgrid allows editing values in a table, and accomplishes this by putting an <input type="text"> inside the <td>. The input is set to max-width: 100% but it still pushes the size of the column out farther in some cases.
For an example, see the grid on their Examples section and click an item in the "Population" column. When it gets the editor class, its padding is set to 0, and both the <td> and <input> have box-sizing: border-box, but the width of the column still increases.
So does width: 100% not mean 100% of the width of the <td> as it is at the time? Or is it just not possible to make this work using CSS only? I could probably use a backbone event to get the size of the td and then set the input to the same size but that sounds a bit hacky.
The way the width of table columns is calculated is not trivial. They try to distribute the available space among the columns in a way that columns with more content gets a bigger share.
If you go and say "the content should be as big as the column" you make that even more complex because you create a ciruclar dependency between content width and column width.
So does width: 100% not mean 100% of the width of the <td> as it is at the time?
No. When anything changes, everything is updated. CSS does not keep a history, so it does not know the width of an element at a particular time. So width: 100% means that after everything was updated, the input will have the same width as the <td>. But that may be different from what it was before the change.
I do not have the perfect solution for your problem, but these are some ideas:
check the column width before replacing the content using JavaScript (as you already noted in your question)
Use fixed table layout. This way all columns have the same width and will not change based on their content.
set contenteditable on the <td> instead of using an input element. This should not impact the columns width — at least not as long as you do not actually edit the content.
I use Bootstrap 3 grid system to create a div based table.
Here is my code on jsbin:
http://jsbin.com/iWoLewu/4/edit?output
As you see the height of product column and other column is different.
Edit: I don't want fixed height also I want link for entire table row except one column. please see above jsbin code first.
Thanks for your attentions.
try to fix height like that
.myCell{height:80px;}
Of course 80px is jsut an example put the value you need/want.
I have a table with n columns. Each column has a predefined width, and inside each column th, there is a div containing the actual header text, and a div containint a dropdown menu.
This is a simplified structure of the table:
<table>
<tr>
<th>
<div>TEXT</div>
<div><select>...</select></div>
</th>
<tr>
...
...
</table>
the predefined width for the column can cause the text to be splitted in more than one line. When this happens, obviously the elements inside the th rearrange their position, causing a misaligment for column's select..
What I need to do, is to find a way to have every select aligned to each other, possibly anchored to the bottom of the th.
http://jsfiddle.net/SezSZ/2/ <- Here I've made an example of what I'm working on.
The 2nd table shows the table without any style (Except for th width): notice the misalignment between the first and second select.
the 1st table, instead, has some styles applied. As you can see, the second column text is overlapped by the select.. I tryed to solve this problem playing with the "position" attribute.. How can I tell the text to take as much space as it needs, without knowing how many lines it will be splitted to?
Another (minor) thing: I'd like to set every select to take 100% width of his parent div, but (TABLE 1) the dropdown menu right side is overlapping the table border (1 or 2 px, while in TABLE 2 everything is ok)..
Thanks in advance for any help, I hope I was clear enough, best regards
I believe this JSFiddle is what you're after, right? The whole trick is to use vertical-align: middle on the th.
I am working with the 12 column grid style sheet from http://cssgrid.net/
It's great, the only problem is that I cannot have empty columns on the left side of the page. If I create an empty div with class "threecol" for example, the contentless div is not being displayed.
.row .threecol {
width: 22.05%;
}
Here is the whole CSS file.
My question: Is there a way to add a class to empty columns that prevents them from being ignored, so I actually have an empty div with the given %-width?
You'll either have to make the div "not empty" with something like a  , or to explicitly set a height (or min-height) value on it. As your div is empty, setting its height should probably not affect your layout anyway.