I'm creating a basic web app which contains a sidebar that is sized vertically by how many elements are in it.
I want the web-app to have adaptive sizing, so will work on any size device.
When the user shrinks the viewport vertically and some of the elements within the sidebar overflow the viewport, I want the sidebar to shrink not overflowing the viewport, and allow scrolling of its contents.
The sidebar is not a predefined height (eg. 50% or 700px), as it is determined by how many elements are within it (could be 3, could be 30).
The image below is the best way I can visualise what I am looking to do:
CSS example
White: is the viewport
Light Blue: is the sidebar
Dark Blue: is the elements inside sidebar
Grey: is the scrollbar
I can get this to work when the sidebar is a predefined height by using overflow: auto, but cannot get this to work when I do not define the height of the sidebar, and leave it to the child elements to determine its height.
Any help at all would be greatly appreciated!
If i can understand true, you can use calc() function in your css.
eg:
If you show 5 element on viewport(height), you can use this code for element style:
height: calc(100vh/5)
this code means: Divide the entire apparent height by 5.
eg: https://jsfiddle.net/uniak/rgzf9nmy/
Related
I'm working on a HMI using AngularJS(1.7.8) and Bootstrap in which there is four main panels : the navbar, a small up-left, a big bottom left and a big right one.
The expectation are that the small up-left one can collapse to become smaller and leaving more room for the big bottom left. I was able to do that easily using flexbox. Inside the bottom-left panel there is an area that is supposed to be scrollable when the up-left panel is visible. When it is collapsed the scrollable area is supposed to have enough room to display its content.
That last expectation is what I struggle with. The scroll area is not applying the overflow-y style attribute and its height is the whole content even though it is outside its parent (the bottom-left panel).
So far I tried playing around with flexbox, setting each panel as a flexbox, setting height and various other things but nothing seems to work. Unfortunatelly I do not control the content and won't be able to fix its height. Since it needs to expand, setting a max-height attribute doesn't work.
Here is an example on fiddle.
EDIT :
From #Pablo-Binar comment, it appears flexbox don't work that great with % height attribute. I haven't found anything in the doc unfortunately.
Also from #Pablo-Binar comment, one solution is to set a height in px to the root node giving flex attributes to the child and to the final one (the scrollable one) set an height in percentage (height:100%).
Use this code
height: 100%.
If that's to high use
height: calc(100% - 30px);
That should do the job.
I have the following layout I need to solve
I understand that the whole idea of the responsive design is to leave the height to adjust to the content, but for this particular work the customer wants it this way no matter how I have to figure it out but I'm struggling hard to achieve it
In my mockup I have a 100% height and weight body, and then a container taking 85% height of the body size.
Inside that container there are the following elements:
A Top div container with the company logo
A Progress bar with a step number
A small div with some instructions for the current step
A Div containing the form elements that the user has to fill
A bottom div with 2 navigation buttons
The content should be always visible no matter the device used (see image below)
Number 4. has a inner scrollbar with overflow-y because that content will change
In order to do this i set heights in percentage (%) for each div within the container, however I need some padding for the elements, but when the browser resizes or the device changes height and width the elements overlap each other
I don't want to rely on a bunch of media queries to fix this. I wonder if anyone can find an approach or some reference for this since i can't seem to find it
Thanks
If you don't want to use many media queries, I think you should use Jquery (or Javascript) like this:
Fixed height of all div except FORM CONTENT (include padding, margin, border with box-sizing: border-box). You can use some media queries for best style.
Use Jquery to calculate height of FORM CONTENT (this is scrollable content)
Example:
$('#form-content').height($(window).height() - X);
// With X = total height of other divs includes margin, padding, border
Call this script in $(document).ready(...) and $(window).resize(...)
Hope this help.
I know this is a common problem and I feel really stupid for not being able to figure it out, but I have a 3 column layout in HTML, and I seriously cannot figure this out for the life of me.
Here is the basic layout of my site:
fixed header,
1 sidebar on each side,
middle area with content.
Here is a mockup of the site that I'm speaking about: http://eitanrosenberg.com/tests/pop/bootstrap/
It looks ok at first, but when the browser is resized, the sidebars get really small and there is a ton of white space. Why is this? Thank you so much in advance.
Look at it this way.
The height:100% of the container div (and the column divs) gets their height from the body-element (100% of that), and the height of the body element is calculated as 100% of the height of the html element
The height of the html element is then (in practice) calculated from the current height of the browser window (100% of that).
So the height of your boxes will all be set to match the heigth of the browser window...
and this is exactly what you see when you shrink the browser window heigth!
Because:
Once your content no longer fits within the height of its container (ie. when you shrink the browser window you also shrink the calculated heights of all your containers and eventually the headroom will be too small) - overflow happens. The content of the "highest" box will then be the first to overflow, and parts of its content will then spill out of it to be visible below the boxes (since you don't use overflow: hidden).
The browser will then allow you to scroll past the bottom of the boxes (so to speak) in order for you to be able to see the content that "overflows the box", but it doesn't adjust the height of container - the boxes will still keep the same height as the browser window while you scroll...
So the background patterns will always be the height of 100% of the browser window in this example (an not match the height of the highest content when the height shrinks below that)...
One way to remedy this - is to adjust the height of the boxes with Javascript (calculate the height of the highest column and set that as an absolute value for height on the container and the boxes - every time the page resizes)
... or you could use "display: table" and "display: table-cell" on the container and the columns respectively as a workaround (overriding the Bootstrap grid CSS) for this particular layout width/media queries...
Hope this helps!
Good luck!
I'm trying to stretch an image vertically in a parent container of my site (not the full body), it is the div with the id "imagen-fondo"
I have tried either backstretch plugin and also just css background-image with background-size to do it.
But the problem in both cases is that the calculated height of the parent container is smaller that the immediate child height, so, the background image looks smaller than the content itself.
How can I make it to be the same height as his immediate child or at least bigger?
You can see the live demo here:
http://50.21.181.12:3001/plantillas/mba
UPDATE:
I think the problem is that div#imagen-fondo is getting the height of the window and not of his content, that is the reason that when the screen is big, the problem doesn't happen, but when the height of the window is smaller than the content it happens, you can check it with this two screenshots, just as you start scrolling vertical the background image ends:
Something with overflows?
UPDATE 2:
For now I introduced some javascript to make it work,
Getting the footer offset position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
Clear floats in parent div using clear: both;
Or use clearfix on parent div.
For now I introduced some javascript to make it work,
Reading the footer position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
I have multiple divs with text and what not in them. When the page is made smaller horizontally all of the elements shift. However,if you resize this page, elements disappear and nothing moves. How do I fix this problem so it is like this page?
Thanks!
If you view the source of this Stackoverflow page, then you will notice that all of the content on the page is wrapped inside of a container div with the width set to 100%, and the margin and padding both set to 0. If you want to have a fixed width, then do not use percentages, but instead specify your page to be a specific width in pixels.
If you want to center all you content, wrap it in a div like so:
<div class="wrapper">
<!-- Your Content !-->
</div>
And then add the following to your stylesheet:
.wrapper {margin:0 auto;width:960px;} /* Change 960 to desired width */
I hope this helps!
Predefined sizes make the elements do not move when you resize the screen, that will keep their size in different screen resolutions also, that is to take into account. Also you must use margins and padding fixed.
In short ... not more percentages, but don't abuse fixing everything