I need to constrain content in a div that has zero or more of height, width, max-height, or max-width set. If the content is smaller than the container in either dimension, it must be centered in that dimension; if it's larger, it must be scrollable in that dimension and start scrolled to the top/left.
This renders as I expected, with the image and text scrolling around, and the top-left corner of the image showing initially:
<div style="background-color:red;max-width:10rem;max-height:10rem;overflow:auto">
<div>
<img src="https://picsum.photos/id/123/400/300.webp">
</div>
<div>test</div>
</div>
It looks like this:
This is the full image:
This doesn't render as I expected (note the addition of display:flex;flex-direction:column;justify-content:center):
<div style="background-color:red;max-width:10rem;max-height:10rem;overflow:auto;display:flex;flex-direction:column;justify-content:center">
<div>
<img src="https://picsum.photos/id/123/400/300.webp">
</div>
<div>test</div>
</div>
It looks like this:
If I remove justify-content, then initially the top-left of the image is displayed, as expected. However, the content is no longer centered vertically if it is smaller than the container.
My questions are:
Why is justify-content affecting the scrollability and placement of the content? Shouldn't it only affect the immediate children of the div it's set on?
How do I achieve the effect I need?
JSFiddle: https://jsfiddle.net/5m4hec27/
<div style="background-color:red;max-width:50rem;height:10rem;overflow:auto;display:flex;justify-content:center; align-items:center;">
<div>
<img src="https://picsum.photos/id/123/400/300.webp">
</div>
<div>test</div>
</div>
Please check the code snippet and try to run it. Try to play with the value of height and width.
If container width is more than the child elements, Child elements will be horizontally centered automatically because of the justify-content property.
If container width is less than the child width, then it will show a horizontal scrollbar because of the overflow property.
If container Height is more than the child element, Child elements will be vertically centered automatically because of the align-items property.
If container height is less than the child width, It will show a vertical scrollbar because of the overflow property.
Note : 1. justify-content is not affecting the scroll ability
2. How to achieve the effect - Please see the Fiddle attached.
Related
I'm using angular2-draggable module to resize div vertically. You can see this demo: https://xieziyu.github.io/angular2-draggable/#/resizable/default, in the Resizable Demo area.
What I wanted is, when resize the top div，the below div height decrease or increase, instead of move down. That is, this whole page height never change, just two div heights mutual adjustment. Is there anyone knowing how to do this?
You can easily achieve this with some simple css. Create a parent container that covers the full page, apply a flex-box style with column direction, and make the bottom element automatically resize to fit available space. e.g.
<div class="container" style="height:100%; display:flex; flex-direction:column">
<div ngResizable>
...
</div>
<div class="bottom-div style="flex:1">
...
</div>
</div>
</div>
I have a child div with a table inside it. I want this div to fill out vertically within the parent container.
I have tried different methods, positions, flex, margins, etc., but I cannot get it to stretch out vertically within the parent container.
Essentially I have the following:
<div class="container">
<div class="content">
<div class="GridViewContainer wrapper">
</div>
</div>
</div>
I want GridViewContainer wrapper to fill out the rest of content
I have set up a demo here: ( I set the table div to a fixed height of 400px for demo purposes)
DEMO - https://jsfiddle.net/7ashn3b5/
You're missing display:flex on the parent container.
Since you haven't made .content a flex container, flex-direction:column is being ignored, and flex items are ignoring flex properties.
Once you add display:flex to .content (and remove the height:400px), you can apply flex:1 to .GridViewContainer wrapper, which tells it to stretch the full available height of its parent.
Revised Fiddle
I'm having a little CSS trouble.
I have some div elements structured like the following example. There are a dynamic number of class="block" divs, each with a fixed width:
<div class="outer-container">
<div class="inner-container">
<div class="block">text</div>
<div class="block">text</div>
<div class="block">text</div>
<!-- More "block" divs here -->
</div>
</div>
My goal is to find a CSS-based solution that will.
Display the class="block" divs inline, without them wrapping to new lines.
Support a variable number of class="inner-container" divs like the one above, each displayed as its own line.
Have the outer container fluidly "shrink-wrap" to match the width of its contents.
Any suggestions?
Not 100% sure if this is what you're looking for, but it might be a start:
http://jsfiddle.net/r4dEX/3/
By setting each block element to display: inline-block and white-space: nowrap, it should allow the elements to sit alongside each other, but not wrap to a new line if the content is longer than the available space (instead the block will move to a new line).
Each inner-container will display on its own line (display: block is default behaviour for a div).
Setting the outer container to display: inline-block will cause it to 'shrink wrap' to fit its content.
Here is an example where the blocks are inline, the inner-containers have a fixed width, and the outer-container is shrinking to fit.
I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}
I have a div with overflow: auto. Suppose I want to put an arbitrary number of div elements inside it such that there is no line wrapping (the additional elements spill into the hidden area and can be scrolled to).
If I knew how wide all those elements would add up to be, I could do this:
<div class="scrollable">
<div class="fixed-width-container">
<!-- elements float left or display inline-block -->
</div>
</div>
Can I get this effect without knowing the total width of the contained elements?
UPDATE #2
Check updated fiddle: http://jsfiddle.net/cyCY3/2/
UPDATE
Check fiddle: http://jsfiddle.net/cyCY3/
Specifying a fixed width and white-space: nowrap for the child elements should solve the issue.