Is it possible with CSS to have two fixed headers which when made responsive affect the content of the scrollable element. I.e. has the headers gets bigger it pushes down the content below.
I am trying to do it with flex boxes, but stuck on having a second fixed header within and scroll element.
http://codepen.io/labithiotis/pen/tkAlB
Want to avoid using lots of media query or js. feel like there must be a solution with flex box.
Related
It's my understanding that flexbox containers and their child items flex fully along only one axis, depending on the value of the flex-direction property, row or column. With a "row" container, you can stretch and shrink the width of the container and the individual boxes it contains, but the content in those boxes does not grow or shrink to match. On the other hand, resizing a window vertically does cause content to resize accordingly. (I think the situation is vice versa with "column" containers, though I haven't tried them alone.)
So my questions:
Do I have that right? I've read through many nice blog posts on flexboxes, but none covered this characteristic explicitly as a main 'feature.'
Is there a flexbox-only workaround, some arrangement of rows-inside-columns or the other way around, maybe with specific properties set special ways?
I tried putting a columnar container inside a flexbox belonging to a row container, and then putting text into that, but I saw no change in resizing behavior--the text still resizes only when the window/viewbox is resized vertically, not horizontally. See this codepen.
(About the example: first, I apologize for extraneous properties or properties set to random-ish values, but I was trying anything and everything. I tried to pare them back without messing up the demo but I'm sure there's much to improve. The svg logo on the left is just in a top-level flexbox in the main container for that row--it behaves as expected, shrinking/growing only with vertical window resizes. I put a hidden logo in a third box on the right so with equal-width boxes on either side, the text between them comes out centered in the viewbox, if you don't use shrink too much side to side. Maybe there's a less kludgy way with flexbox to a row with centered text and a logo on the left.)
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.
We are using Bootstrap 3 on our site and I'm attempting to extend content outside of the container, but am coming up unsuccessful. Here is an image on what I'm trying to do:
https://imgur.com/a/tGDMf
I would like to use 9 columns on the right of the container for content in 3 sections, and use a div to cover the left 3 columns and extend to the edge of the screen. I have used :before and :after attributes for extending background's to the edge of the screen in the past, but the content has been inside the container. I need the content to go outside of the container if possible. The content above and below this section will be using Bootstraps columns so I'd like to follow suit with the responsiveness and structure.
Any ideas on how to solve this problem?
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.
On this site here:
http://acp.studevent.co.uk/
I have a fixed div at the top which will act as a menu and a content div below containing everything else. I cannot figure out how to use overflow-y: scroll so that the pages scroll bar is only used for the content div and ignores the header div at the top.
PrimeFaces's layout/layoutUnit components do exactly what you needed. And if I'm not mistaken, they use javascript to calculate and set an height to the content. Each time you resize your page it recalculates the values.
You can check their showcase:
http://primefaces.org/showcase/ui/layoutFull.jsf
I dare say, you need to set a fixed height for overflow-y'to work. And one way to make it dynamic is to somehow calculate the necessary values.
Also you could make them have dynamically calculated fixed heights by using css positioning and left-right-top-bottom properties.
Best regards..