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>
Related
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.
I'm trying to achieve a layout where there is a div with a max height, and inside that, there are two divs. One div (the footer), has a fixed height (55px). The other is a scrollable div where the height will increase/decrease according to it's content.
<div class="parent">
<div class="wrapper">
<div class="panel">
Scrollable Div
</div>
<div class="fixed">
Fixed footer
</div>
</div>
</div>
The scrollable div height should always fit it's content. But when the max height is exceeded (.wrapper has a max-height of 300px), it should only take up the remaining space minus the footer height without affecting the footer's position.
But what I achieved of this layout is not according to my requirement.
In my example, when content gets added into the scrollable div, the footer gets pushed out of the wrapper. What should happen is the footer to remain at the bottom of the wrapper (without getting cut off), and the scrollable div to span its height upwards.
Please note I'm trying NOT to use position: fixed or absolute.
This is for a mobile app so fixed positions causes a lot of bugs.
Here is the JS Fiddle of what I have so far,
fiddle
set the max-height:300px to the .panel div instead
JS Fiddle here
I am using bootstrap, the container is 915px width, I am running in mobile browser.
The problem is the div with background color is supposed to occupy the whole width, but there are some white margins.
how can i extend the div a few pixel in each side?
<div class="container">
<div class="" style="width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
Have you tried using a different container class from Bootstrap?
Perhaps "container-fluid" as described below and on the Bootstrap component page - http://getbootstrap.com/css/
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
You could also mix and match via Media Queries and JavaScript if you wanted to. For example on certain Media Query dimension triggers compensate for the style overrides you wish to be used.
Reference:
http://getbootstrap.com/css/
Try adding a negative margin
margin-left: -15px;
margin-right: -15px;
From what you've posted, it looks like the inner div is 100% of the container.
Either put the inner div outside of the container or make the container 100% width (there are other bootstrap containers for this).
You can try use .row:
<div class="container">
<div class="row" style="
width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
I need to design a webpage where each div element fits the browser window.
Here's what I have right now:
http://jsfiddle.net/E9HER/
What I need to do is to have each of those red-bordered containers to vertically fit the browser window (for heights greater than 500px).
<div class="contentcontainer">
<div class="WhoWeAre"><a name="WhoWeAre">Who we are</a></div>
<div class="WhatWeDo"><a name="WhatWeDo">What we do</a></div>
<div class="OurWork"><a name="OurWork">Our work</a></div>
<div class="Contact"><a name="Contact">Contact</a></div>
</div>
Any suggestions or help would be greatly appreciated.
you can set
.wrapper {min-height:500px;
height:100%;}
.contentcontainer {
height:85%;
min-height:500px}
apply the contentcontainer properties to the containing divs as well...
You will have to play around with the % to come to a proper height.
This will scale the divs to the browser window, but will set it to 500px for windows below that...
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;
}