There is a view (only on Safari) error when tilt object is over a fixed element.
https://codepen.io/imagica/pen/zYPYbbJ
.header{
height: 100px;
width: 100vw;
background: red;
position: fixed;
}
any ideas how to fix this?
Marco
I have a modal box which has some content and at the bottom a button container which has two buttons. I want the button container to be always relative to the screen / viewport. Now the tricky part is the modal box is draggable. I can move it up and down but the height remains 100%.
Now if I give position:absolute;bottom:0 to the button container, it sticks to the bottom of the modalbox. but when I push the modal downwards, the button container also gets pushed down.
How could I achieve positioning this always at the bottom of the screen regardless of the movement of modal ?
const ButtonContainer = styled(View)`
align-items: center;
justify-content: flex-end;
flex-direction: row;
position: absolute;
bottom: 0;
right: 0;
left: 0;
`
const Container = styled(View)`
padding-left: 15;
padding-bottom: 60;
padding-right: 15;
padding-top: 15;
height: 100%;
`
<Container>
<ScrollView>
{content}
</ScrollView>
<ButtonContainer>{buttons}</ButtonContainer>
</Container>
How to resize the Materialize chip component?
http://materializecss.com/chips.html
I tried changing the CSS of chip, but the round shape distorts.
You can just change it's width and height with css.
.chip{
width: 240px;
height: 80px;
border-radius: 80px;
line-height: 80px;
}
.chip img{
height: 80px;
width: 80px;
}
Standard border-radius is 16px so change this value to the same value as the height this will make the chip round again.
Also the line-height is to make the text centered again.
If you use an image inside the chip you will have to make that bigger aswell.
Example
I have a very long page and when I open a bootstrap modal from the bottom of this page the modal is displayed on top of page not on top of the screen. So the user has to scroll up in order to see the modal.
How can I change this behavior?
You have got the result after adding below style sheet in your css.
yourselector {
position: fixed;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}
Please how can we set the map div to be height: 100% of its container?
I have tried this within a bootstrap template content section, but all I get is height of 0px. Even Google-Dev tools shows #map height as 0px.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
Set
#map{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
and give its container position: relative.
The above answer didn't work for me, but this did:
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
..from A full screen leaflet.js map
Leaflet needs an absolute height, and height: 100% only refers to the height of the parent element - if this isn't set, it will default to 0.
If your map is the only element in the body, use height: 100vh to match the height of the viewport (Example).
If your map is inside a container, set height: 100vh on the container (or other desired height) and height: 100% on the map element (Example).