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();
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;
}
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 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] { ... }
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 am trying to figure out how to make vertical and horizontal images at the same height. The height I need by vertical image. any ideas..
I was thinking to make the same height, but when I resize it shows like above...
css: max-height: 375px!important;
Update:
http://jsfiddle.net/LG2B8/
use min-height for horizontal image
min-height: height of vertical image;
as mention above, just give
css: height: 375px!important;
or
css: height: 4%0!important; //give in percent which is good for responsive ui
Some basic rule is
Height - apply when you need / know proper height
Max-height - apply when you want to restrict image height when exceed, this is good to used for images, you can also use for all other content too.
Min -height - apply when you want to minimum height should be, this is used for div/table/tr/td for responsive ui
I rectify and only change in css. just remove everything and add this. I added width for understand.
img
{
display: inline-block;
height: 300px;
width:200px;
}
img is html tag and all images will work as per "img" css attributes
Here is my solution:
Html:
<div class="w">
<div class="img"><img src="http://i.imgur.com/4OAz0Cf.jpg"/></div>
<div class="img o"><img src="http://i.imgur.com/EJsmCmT.jpg"/></div>
</div>
Css:
.w {
display: table-row;
}
.img{
width: 50%;
display: table-cell;
}
.img img{
min-height: 500px;
max-height: 500px;
}
.img.o img {
width: 100%;
}
Example