Trouble with container height = 100% not working - Angular/Material - html

I am creating a mockup for a new UI using Angular and Material design elements, however I am experiencing trouble attempting to get the area underneath my toolbar to take up the remaining vertical height of the page.
Here is a link to my code example
I have Googled the problem and the only thing I have seen is the solution to set
html, body {
height: 100%;
}
However I have not found this to be a solution.
I was thinking of perhaps using a flex box, but I am unfamiliar with how they are used.
Any help would be appreciated.
UPDATES & SOLUTION
I opted not to go the flexbox route as I was wanting something quick as a solution and flexbox can be something I look more into in the future.
After deciding that I wanted a static nav bar, of which was not occurring when first coded, I set upon using a CSS calculation to utilise height: 100vh and subtract the overhang that this caused.
mat-sidenav-container {
height: calc(100vg - 64px);
}
I found however, that when shrinking the size of the window, the responsive nature of the material elements meant that the toolbar would reduce in height somewhat. This led to a blank bar below the page content as the amount to subtract would need to be less in this situation.
The fix for this was to add an #media change for the specific page width the shrinking is triggered. I was then eventually left with the following:
mat-sidenav-container {
height: calc(100vh - 64px);
}
#media (max-width: 600px) {
mat-sidenav-container {
height: calc(100vh - 56px)
}
}
This may not be the best solution for the problem, but so far I have found this to be one solution that works.

Ok, here is what worked for me in with the code you gave me:
I added the style="height:100%" to the following classes:
html, blitz-app, to the secondary div and to the mat-sidebar-container
Edited: Changed the style of the html tag to: height:calc(100% - 64px);
Reason: the 64px is the height of the toolbar
I added it all in the chrome browser debugging console, because I couldn't find the actual classes the code is using, but I am sure you can :)
Hope I could help.

Related

Edit website to be responsive based on display size

I work on a school project that has a website. The website is made by other graduated students and I have almost no HTML or CSS knowledge.
I want the website to be more mobile friendly, meaning that every frame and object gets resized according to what display size you have. Now there is text outside the display, iframes being too big, e.t.c. I have tried to fix this for hours by searching online without any major results.
The thing I've discovered is that changing from overflow-x: auto to overflow-x: hidden (in a CSS file) can help to remove overflow/bleed.
If you have any tips on how I can improve this page it would be strongly appreciated. Feel free to inspect the code using browser tools (CTRL+SHIFT+I).
How do I resize iframes, text, images, e.t.c. according to the width and height of the display?
Why is the footer text outside of the screen, and how can I fix it?
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
read this, you can also use bootstrap grid to make things easier
For skips the most of overlaps that could occur in the page, try to use the configuation below:
html, body {
// reset the browser config
margin: 0;
padding: 0;
}
* {
box-sizing: border-box; // padding and border will not be added to width and height calc
}
img {
max-width: 100%; // protect from images be more large than the container
}
// https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
box-sizing: border-box; will help you in mostly cases, but in some cases, after you inspect the element with overlap width, will can use the calc() to fix it, like:
element {
width: calc(100% - 30px);
}
In you case at https://aqpi.se/karta.html the problem is you setting a fixed width on the iframe element.
With overlap
Without overlap
Responsive web sites are created with media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.

Making page resize with browser

I'm doing the first project for The Odin Project, which is recreating the Google home page. I think mine looks pretty good considering I've only been at this for a few weeks, but when I take my page out of fullscreen mode, a scrollbar appears. If you look at the Google homepage, The page itself resizes instead of using a scrollbar. Overflow:hidden obviously will just cut off the bottom of the page, so I don't want that. I'm sorry if I'm not being specific enough, but here's a link to my Github to check it out.
And if you see anything that I'm doing completely wrong or messy, I'd really love some criticism.
I haven't had a look at your GitHub, but I would suggest incorporating bootstrap, which basically lets you develop pages responsive to the screen size.
You might find this tutorial helpful:
https://www.w3schools.com/bootstrap/
After a quick look through your Github, you are setting a min-width: 500px to your all class which contans all your content. Try setting your all class width: 100% instead. This will allow your content to fill the page and adjust as the screen size adjusts.
Granted, once you get really small and content hits each-other they will break to other lines, but you would have to handle that with a media-query to adjust the size/scaling etc...
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
Actually, all I had to do was remove all your .all styles to fix this issue. I also fixed your footer so it sticks to the bottom of the page. Finally, if you want to make the input size well, use media queries like so:
#media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
This will set the input's width to 80% at screen sizes 500px and smaller. Hre's a pen of what I changed: https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100

Responsive Page on iPhone, Ipad - unwanted white space on right side of Responsive in landscape & portrait [duplicate]

I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡

How To Adjust Gallery Height With CSS

I am using SquareSpace for the building blocks of my site and creating some custom CSS to fine tune. I'm trying to get the gallery page to display the images with more height. At the moment they are not very big in the slider, especially when viewed on a large monitor, seems like there is a lot of wasted space.
Using Inspect Element, I found there to be some HTML styling the height and restricting it to 500px.
<div class="slideshow strip main sqs-gallery-design-strip rendered: id="yui_3_17_2_1_1441831607164_254" style="height: 500px; margin-top: 203:5px;">
Changing the height from 500px to 600px in Firebug works perfectly, so I tried to apply some custom code to in the SquareSpace site. I used:
.slideshow strip main sqs-gallery-design-strip rendered {
height: 600px;
}
The injection of code did not have a visible result on the page. Am I writing the CSS incorrectly? Is there something I'm missing here? Please help.. Thank you!
Try to clear your cache. Sometimes a cache does not refresh on a server.
To clear it on a site, just hit Ctrl+F5.
Your CSS rule is close. It should read:
.slideshow.strip.main.sqs-gallery-design-strip.rendered {
height: 600px !important;
}

Make Page Content 100% Height of Document - Painful Issue

I am working on the second version of my new web app Trekeffect and I want my interface content to be 100% of the pages height, but I just can't seem to figure it out. I make the HTML, body and all other parent elements 100% height, but no matter what I do the height never fills the document.
This screenshot shows my issue:
You can view the issue by visiting: http://dev.trekeffect.com/home
and then by clicking on any of the cities listed: Example: Anchorage, Alaska
I've played around in Firebug and no matter what I do I can't get this working. Please help!
It is because of this:
html, body {
height: 100%;
}
.three_col .right {
height: 100%;
}
Remove those, and your problem is solved!
The reason this is causing a problem, is because CSS sets the body to a height of 100% of the available screen space.. Therefore any content below this is considered overflow.