I'm trying to create a React app that is optimized for mobile and am doing most of the layout using flexbox. I'm having trouble forcing the main container of my app to automatically expand to the full device height.
What rules can I apply, specifically to my html container <div id="react-app"></div> and my main app container <App></App> so that they will always stretch to the full screen height, even when their children wouldn't force them to do so?
You can use
height:100vh
for your App component, but it can looks not perfect on iOS Safari. Also you can set
html, body, #reactapp, .App {
height: 100%;
}
.App {
display: flex;
}
patelarpan's answer here seems to be the most concise solution:
You can achieve this by using "vh" units, and it's a more effective way than using percentages because you don't need to set every parent height to 100% if you want the child's height to be 100%.
.columnContainer {
display: flex;
height: calc(100vh - 60px);
}
Here is an example of the 60px app bar height being excluded from the viewport height.
I replaced the height line in patelarpan's example with this, since I don't have an app bar:
height: 100vh;
root > [data-reactroot] { height: 100% } in your CSS should work.
Or just the tag itself:
[data-reactroot] { ... }
Related
Problem:
There is a white border around the header. How do I extend the header to the edge of the browser?
What I've tried:
I've tried adding width={1} to the makeStyles and into the <Box> component. Neither fixed the issue. Interestingly, the AppBar extends to the ends of the browser.
Any thoughts on how to extend the header and remove the white border that's around the header? I added an image below for clarity. Thank you.
Code base
There is a margin of 8px around the body.
Remove that margin and it would solve the issue.
Working Demo: https://codesandbox.io/s/quiet-wave-4t9vn
html,
body {
margin: 0;
/*optional css below*/
padding: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
}
When I view my React app on mobile there is always extra space to the right:
https://dsousadev.github.io/23imgs/
I can't see this extra space when I use dev tools to simulate a mobile view, but when I view the site on a variety of mobile browsers the space is there and the app doesn't auto fit.
Here's the current CSS in my media query:
#media all and (max-width: 414px) {
.ImageCard,
#CardImage {
width: 314px;
}
#CardImage {
height: 314px;
}
ul {
font-size: 1.2rem;
padding: 0 15px;
}
}
The element <input accept="image/*" name type="file"> is causing the issue.
If I apply display: none to .fileContainer input, the space goes away.
Edit
Alright, so looking into the issue a bit more, it looks like semantic.min.css is applying a font-size: 100% to button, input, optgroup, select, textarea. This is causing your input to grow in size (here's the input when visible):
If we disable the font-size: 100%, the input renders correctly:
After which, your original styles work:
So display: none or reverting font-size will work :)
I'm creating a application with angular.js 1.5 components. I'm facing a problem with the footer it's going up side rather than staying down how can I fix this?
Here is the plunker code.
[https://plnkr.co/edit/ax1EO771NJg1rfgI840S?p=preview][1]
The problem is that you are using virtual height value so the .wrapper element takes the height of your window and doesn't push the footer below.
.wrapper {
position: relative;
top: 0;
// height: 100vh
}
I'm building a SPA with Ionic and Angular. My map shows up just fine when it takes up the full screen (i.e., ion header + map only) but in one of my screens, I'm trying to show the ion header + a form + the map so that the map would only occupy ~50% (~325px) of the screen. My issue is that, for this screen, the map still takes on the full screen height (~625px) so that ~50% of the map exists off-screen.
My current structure looks as follows:
ionic nav bar
formContainer div (height determined by contents) wraps the form
mapContainer div (height set to fill the rest of the visible screen via flex box) wraps the map
I think that my issue is caused by this css styling:
.angular-google-map {
height: 100%;
}
.angular-google-map-container {
position: absolute;
height: 100%;
width: 100%;
}
My hypothesis is that the height gets set to 100% (~625px) before the mapContainer div can determine its height (~325px). Has anyone had any luck wrapping a map so that its height only takes up the visible div?
Try to set top and left. Also remember that ionic adds a new scroll class to your content
.map-container .scroll{
height: 100%;
}
.angular-google-map-container {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
I have tried everything but can't seem to get the height of the page content. I am using Onsen UI with JQuery. Can anyone provide me with an example?
I am trying to calculate the height minus the navbar so that I can adjust a map to full height.
Thanks!
You don't need to calculate any height, just put the map in a div and set the style to something like that:
#map_canvas {
position: absolute;
width:100%;
height: 100%;
margin: 0;
padding: 0;
z-index: -1
}
Anyway, if you really need the height of the current page, you can get it with JQuery using $('.page__content').height();