I have a pricing table and a DIV called "base" which contains another DIV named "offer". My wish is to make that on hover one of the OFFER DIVs, that this DIV will become larger. But, I can only do that if DIV "base" gets larger first to make place to enlarge DIV "offer". Otherwise, my pricing table crashes.
change the height of base div set to auto
.base{
height:auto;
}
then using jquery.
set the height of offer div as much as you want.
#('.offer.).onhover(function(){
$(this).height(value); //set value
});
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.
Here's my problem, it's quite uncommon so this is why I ask the question here:
I have a parent div, called middle (which is itself inside a parent div called row, its height is set to 315px). This middle contains two divs, div1 and scrollable_div.
div1 has a determined height that is not meant to change. On the other hand, the scrollable_div contains a list that is meant to evolve (through javascript method), which means if the list contains too many elements, it will end up overlapping and do some crazy stuff as soon as the list reaches the row's height. I would like a scroll to appear in order not to totally wreck this good-looking page when the list gets too big.
Here a codepen : http://codepen.io/Yocto/pen/qZXQjm where elnamestands for element name. (row1 has a purple background and the not-so-scrollable list has an orange one).
Don't hesitate to tell me if what I want isn't quite understandable.
Simply set a height for the scrollable div and then set the y overflow property....
Updated CodePen
.scrollable_div { height:130px; overflow-y:scroll;}
I'm trying to create a table of rows, each of which has some content in some block element (I'm using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the "test" text on the right should have its containing grey DIV filling up the full height of the containing TD cell:
http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/
I don't want to explicitly set the height of anything (except maybe to a percentage) - setting height:100% on the child DIV doesn't change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell's rendered height, provides absolutely no way to size a child element to fill it without using Javscript!
NOTE: I'm aware that there are other questions similar to this but they don't seem to take into account CSS3's new flexbox functionality - perhaps that could solve this problem?
You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:
<div style="position:relative; width: 50px; height: 50px;">
some link
</div>
I'm told by Boris Zbarsky himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.
I have two divs as follows:
fluid width content
fixed width content
I'm trying to make it so that when the available screen width is > 600px, they'll appear side by side. When the screen is resized below that, the second div needs to drop down below the first one. In either scenario, they need to take up all available width (so when the second one drops down I can't have a 200px padding/space on the right of the first one).
I believe it's possible to do this with JS and/or css3/media queries, but I'm wondering if there's a simpler solution?
To put it in context, I need to design a fluid page that will be displayed via an iframe. I will not be able to control the width of the iframe, so need my two column content to be fluid.
Apply a min-width to the div that's not floating. If the browser can't satify the min-width with the floating box to the side, it'll drop the floating box down and the fluid width box will fill the entire width, until it gets shrunk to its min-width again in which case it overflows the body.
Try this:
div
{
min-width:100px;
max-width: 150px;
background-color:yellow;
float:left;
}
min-width and max-width
I want to use this format to create a css "table" within my layout.
However defining the height in any of the elements still doesn't change the height of
the "table" with the floats in it.
I want the table to remain dynamic, but I can't find a way to make this height shrink because at the moment it is leaving a large amount of blank space at the bottom after the content in the floats.
Thanks for any help!
Js Fiddle Showing Gap
#right { height:775px; } <----- is this the gap you're trying to eliminate?
If so, it's nested inside your main content block(s). Removing it, will allow the height to expand with content.
http://jsfiddle.net/NAA8w/3/