Map & widgets that fill browser window - html

I have a webpage that has a Map (google), Chart, and Grid. They share the screen via Splitters and TabStrips. I am having an impossible time making them expand to 100% of height/width of the space that they have available to their
An example is worth more than 1,000 words:
I have created a stripped down JsFiddle that shows the problem:
http://jsfiddle.net/drysg/Rh7cL/
Full Browser version: http://jsfiddle.net/drysg/Rh7cL/embedded/result/
I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.
I am looking for a pure CSS solution that:
Expands Grid, Chart, and Map to fill the screen at outset
Browser Resize will dynamically resize the Grid, Map, and Chart
(they will shrink to available space like any good WPF or Silverlight app!
If needed, I would tolerate a JQuery approach that responded to window resize events.
If you look closely you will see there are actually 4 issues:
The map height is not 100% of the needed space
The TabStrip that holds the Chart & Grid is not filling 100% of the height
There is a scrollbar on the TabStrip that holds the Chart
and Grid (I want that removed since they should be filling the space)
What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)
The layout hierarchy is as follows:
I. Top Window
1. Title DIV
2. Splitter
A. Map
B. TabStrip
i. Table DIV
a. Menu
b. Grid
ii. Chart

Set both BODY and HTML elements to { height:100%; overflow: hidden} and then reinstate your commented DIV height rule back to 100%;
See http://jsfiddle.net/t4dzj/1/ - does that take care of it?

Related

CSS Adaptive Styling - Add scrolling to a sidebar without a defined height

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/

fullcalendar height not considering surrounding container

I have a vue.js project which I am integrating vue-fullcalendar into and I am running into an issue where the .fc-scroller fc-time-grid-container height is set beyond the height of the surrounding container.
I borrowed a codepen example from fullcalendar.io to recreate the situation. I structured the App.vue file as close as I could get it to my actual application: https://codesandbox.io/s/p3418kmo7
When you click "open in a new window" it appears that the height of the scrollable area is being set to a value which isnt considering the fact that its not the only thing on the page. I have tried setting the fullcalendar.io properties height and contentHeight without any changes to the overall behavior. When you force the height property <div class="fc-scroller fc-time-grid-container" style="overflow-x: hidden; overflow-y: scroll; height: 879px;"> in Chrome's html editor to a value smaller then the main container (in my case 500px works) the scrollable area shrinks and fits inside the main container removing the additional scrollbar.
I am not really sure what to do here, how can you control the computed height of the scrollable area so that your main container isnt overflowing off the page?
So after some debugging I was able to figure out that the properties contentHeight & height are not respected with passing them into a view specific configuration as I had above. Adding them to the global configuration & setting them to 'auto' worked out in my case but it would be nice to be able to handle each view independently.
Also wrapping the <full-calendar> template with a <div style='overflow-y: auto; max-height: calc(100vh-150px);">... was enough to solve my problem. It would be nice if the default aspectRatio calculation took into consideration things like the navbar height.
Here is the demo: https://codesandbox.io/s/mjz32jnoop

Can you control mobile Chrome's "inferred layout height" (for horizontal layouts)?

Lacking better terms for the problem, this question got a bit long. Sorry!
I've been trying to build a simple horizontal layout with a bunch of <div>s with width: 100%; height: 100% next to each other ("screens" of an app that you can swipe).
In Chrome's responsive preview, as well as on a real device, empty space appeared below the <div>s — no invisible objects, no traces of the excess height in any DOM properties.
Here's a gist, try it via bl.ocks.org. Scrolled all the way down, it looks like this:
Red/blue are the divs, yellow is bodys background-color.
In a related answer I found this:
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
Which means that if my content is wider than the viewport, a minimal height will be calculated for it. I find this weird, and came up with workarounds:
set html, body { overflow-y: hidden}
put all children of <body> inside a <div> wrapper
Since both methods have downsides or aren't always applicable, I am wondering: is there a way to control this behavior, like, set the inferred layout height to "auto"?

Form page fixed height and responsiveness

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.

Bootstrap 3 Column Site {height: 100%;} not working

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!