I have a table in which in one column some content is initially hidden, but appears on hover. The problem is that on hover the content then resizes that column's width and distorts the table.
How can I set the column to not resize itself without setting table layout: fixed or setting a width.
The table layout fixed causes columns to size themselves in unnatural ways, using only the first row, which is unacceptable due to the large variations in content length in different rows.
Is there a way to allow the table to size widths according to the longest column of any row, and then disallow resizing when it's hovering.
I'm using css hover to do my show hide if that's relevant. Thanks.
Why don't you just change the opacity attribute on hover, rather than the display attribute? So to reveal the content you would change opacity from 0 to 1, and to hide it from 1 to 0.
Hide the content using a div or a span which "covers" the column instead of hiding the actual content itself.
Related
I want to use bootstrap's well component on a horizontal form.
Most rows of the form only have one or two fields in a set of columns, and I am specifying the width of each column.
I would like to style some of the of rows in a well, but I don't want to have the well go across the entire screen, because it looks weird to have so much extra space to the right of the fields. I only want to style the maximum width of the columns in the rows.
If enclose the grid within a div of a set size, then all of the controls' sizes and positioning are affected.
Is there anyway to style a row this way?
Is there a way to create a div that has the right width, and position underneath the actual rows?
How to format a table using CSS such that:
the table is within the screen that the browser's horizontal scroll bar doesn't show up and users don't need to scroll horizontally to see the right side of the table;
the cells use as much width as necessary, that a column containing cells that only has numbers such as "1", "21" will not use a width that's much wider than necessary to show all the numbers in all cells in that column, say 4 character width, i.e. using much more than it means wasting horizontal space;
for columns containing very wide cells, or more precisely, content that will occupy large width if allowed, use as much width as possible such that 1) and 2) are not violated, and if the whole content of the cell can't be displayed, let horizontal scroll bar show up for that cell.
Is this doable in CSS for latest Firefox and Google chrome on Windows and Mac OS X?
My first attempt was based on CSS: Constrain a table with long cell contents to page width?, using nested divs with position: relative then position: absolute. The size of the absolutely positioned div isn't taken into account, which is good for the table's width but bad for the row's height: it doesn't expand to include the scrollbar.
Then I tried table-layout: fixed as suggested in How can I set a <td> width to visually truncate its displayed contents?. That also accomplishes the goal of ignoring the size of the cell's content, but in doing so makes it so that we can't specify, as before, that the last column should take all leftover width.
See also: Why does overflow:hidden not work in a <td>?.
These tips may help:
1- Do not specify any width for your cells
2- When you insert a page automatically there is a Style created and assigned to it which says:
width: 100%;
go ahead and delete it. that way your table will become very small and adapt itself to the content of the cell.
3- Use nowrap property of the cells for the fields that you want to stay in one line like numbers, but do not set it for larger texts and allow it to be multi-line.
4- You may want to set a width for your table or put the table in a panel and set a width for the panel.
I am not sure how to show the scroll bar for just one row, but I think if you show them in multi lines you don't need that option.
Please note that I am not trying to resolve any specific issue, but trying to understand what's causing this issue.
I have set the width, height and display of some divs, but the height/width settings are not being honored. The text is also being pushed downward.
http://jsfiddle.net/k7esv/
1) Why does it push the text downward when height is set in table-row then BUT when height is removed, it places text at the top?
2) Why are the width/height settings not honored?
3) Why doesn't setting the margin property have any effect on them either?
http://jsfiddle.net/k7esv/1/
1) This seems to be a rendering issue specific to Firefox. Setting the vertical-align property on the divs fixes it. top, middle, or bottom all seem to work. I don't understand myself what FF is doing when there is a height but no vertical-align set; it might be a bug.
2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).
3) Table cells don't have margins. Use border-spacing and display:table on a parent div.
http://jsfiddle.net/chad/k7esv/3/
I will just add (seeing as it seems to have been missed) that setting the heights on individual table cells in a table row can be pointless, as all cells in the same table row will become the same height as the tallest cell in said row.
Having said that, heights may want to be added for when dynamic content is served to different cells, meaning their heights fluctuate. It may be that you want to set a particular cell to never be less than height X, which will only come in to effect when another certain cell has less content.
Currently I am working on a maintenance of website and I'm stuck with an problem, the problem is like that: I have to redesign the menu bar of the website. Previously in the menu bar there are 6 menus but now there are only 5 menus in it. I have to delete one menu item from the bar. I simply deleted that row from the list items of the menu bars. In the previous designed they used the display property of css to create the blocks but after deleting the one menu the space for one menu item is left, while i like to increse the width of the menu bar.
Without seeing the code, it is hard to say.
However, in your stylesheet you can adjust the width for the list items as such
.menu li{width:35px;}
To figure out how much to adjust, take the width of the last element and divide by 5 (the number of the remaining list elements).
So, if your width was 50px, add 10px to the element style so that each of the remaining elements covers the width of your previous list-item.
Maybe a brute way to this but it actually works great:
Use table instead of list. I use this with some padding offset because spaces between cells are linear based on cell content size and padding gives you constant minimal space between menu elements.
Another way is to use block elements and CSS display:table and table-cell but remember IE7 does not know these ones.
Benefits: no Javascript
If the menu item <li> has a fixed width, then the total width of the menu divided by 5 gives the width of the each menu item. check in the css for the tag "li" or the class specified for li. then change the width of that to the new width
In a two column template, how can we use background on each column repeated when height of both columns differ?
eg, if my column 1 height is 200px (after loading some dynamic matter) and column 2 height is 500px, column 1 background is shown according to 200px height and column 2 background is shown according to 500px but i want both columns' background to be 500px.
Note: heights may differ because of dynamic content that will be loaded.
Ah, equal height columns. You can find dozens of techniques online using JavaScript, CSS, images, etc., all with varying degrees of success.
I'm a fan of faux columns, where you have a single background image that is the width of both columns, and that image is tiled in a container element that surrounds both columns. Then the background will extend as far as the tallest column. Theoretically, this same technique can be used for two, three, or more columns.
The original article is on A List Apart (http://www.alistapart.com/articles/fauxcolumns/), but the end result can vary a lot depending on your setup and structure.
Depending on other layout factors, an easy solution is to create a single background image that spans both, and set it as the background for the container element. That way, no matter which column has the vertically larger content, the background will span the entirety of it.
Of course, this really works best with fixed width layouts, etc.