I have a div with fixed width.
Inside that, there is a table. (Table may contain any number of columns)
On hover of each it shows a popup div.
But the popups for the tds of last column hide, because of the fixed width of the table containing div.
How to fix this problem?
Related
I have a table with expandable rows, so each row expands to show another table inside. Sometimes such tables have cell content with long strings; this causes the parent table width to get wider when one of such rows is opened. I would like the parent table to remain the same width and that the child table stick within its 100% div container (which is inside a td) with overflow: auto, so it can be horizontally scrollable.
I made a codesandbox to illustrate better this: https://codesandbox.io/s/tannerlinsleyreact-table-sub-components-94n7n?fontsize=14.
Note that the parent table is inside a div with overflow: auto, so if you make the window narrower, you will see a horizontal scroll for the parent table. I want this behaviour in the child tables as well, but you'll notice that when expanding a row (by clicking the hand emojis), the parent table gets as wide as the child table.
EDIT:
I saw I could just get the parent table's width with JS and fix the width of the container div inside the td. But I was wondering if this problem has a no-JS solution.
Also, I tried with table-layout: fixed, but as explained in my comment, it doesn't solved the issue.
Any thoughts?
All table width depends on its cell's (TD's) content.
1) The first way is to give this style table-layout: fixed; to the outer table.
2) The Second Way is, you need to get the outer table width with jquery and assign it to container div (which is inside a TD). And for responsive generates the outer table width on resize of the window and assign it to container div (which is inside a TD). Then the container (which is inside a TD) will be horizontally scrollable.
I am using Bootstrap. I have div with class="row" and three columns inside with divs in each column.
The third column overflows outside the row div, which could be fixed by giving padding-right to row div. But it still repeats when resized to smaller size.
While resizing from md to sm to xs, the column divs overlap during the transition.
How do I fix this?
If all of your columns (col--) add up to 12 you should be alright. If it's an image that's overflowing (which it sounds like it is) you can add the img-reponsive class to it. This will set max-width: 100% which sounds like the issue but I can't be sure without a code sample.
I have a scrollable DIV that has lines of information (textarea's), as DIVs,
one of top of another.
The scroll is something like 300 x 400 px, but it can have a lot of lines in it (DIV elements).
For each DIV line of information I have another small DIV that basically
lets an user click on YES / NO to delete that line of information.
I hide all of these "deletion" DIVs, but show only one of them, when
an user clicks on "delete" button for a particular line of information.
Problem comes because I position nicely the "deletion YES/NO div" above each line of information, with position:absolute. relative and fixed do not work well for me because they break the nice alignment I have in the "outer" DIV that holds all this.
For the 1st visible to the eye entries (lines of information) the "deletion" DIV for each of them looks ok (with position:absolute), but when I scroll down
the DIV, they don't show up no more. So this is the main problem.
How can I deal with this problem ?
I needed to cast my "nicely done delete DIV", which I kept position:absolute into another DIV, which had set position:relative, just that, as styling.
This way the "outer" DIV positioned relative was keeping the track with the other elements in the main scrolling DIV, and the absolute which was inside it would now position nicely on top, with margin-left, or margin-top etc.
I have one parent div and multiple child divs placed in one row. These child divs are created dynamically, and I don't know how many of them will be created in the moment of rendering page. I want parent div to have fixed width, and to have horizontal scrollbar in case all child divs are not visible. This works fine.
But when I have content inside my child div, that div moves down, and it's not alligned with other divs.
I'm not sure where is the problem?
Here's the jsFiddle example.
I tried to put position:absolute to inner content of child div, but that didn't help much.
I added:
div {
vertical-align:top;
}
http://jsfiddle.net/LSZZx/30/
I'm trying to create a table with each cell having a fixed width but absolute but varying heights. For example in the first column the first row would be 20px, the second 65px, the third 20px. In the second column the first row would be 20px, the second 45px, the third 40px. And in the last column, the first row would be 20px and the second 85px.
All of this works fine if the table cells are empty or large enough for the content. However, if the content is larger than what the cell accommodates, the row will expand vertically whereas I would like the extra content to be hidden.
I've tried using
overflow:hidden
for the <tr>, <td>, and doing the same while placing the content within a <div> but none appear to achieve what I'm looking for. Any ideas on how I can constrain the row height to an absolute value with any extra content hidden rather than expanding the row? I'd prefer to keep it within a table, but if it's not possible and I need to use another display technique I'm open to the idea.
When using the div solution, have you tried setting a height for the div itself while giving it an overflow: hidden style?