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).
Related
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
How can I properly use sprite sheets in react-native? Or do people typically load icons separately and not use sprite sheets? Mind you this is not sprites for animation, just pure icons.
For example here is my sheet...
And here is the css for one icon...
.Sprite {
background-image: url(./assets/images/spritesheet.png);
background-repeat: no-repeat;
display: inline-block;
}
.IconMenu30px {
width: 30px;
height: 30px;
background-position: -53px -5px;
}
And I tried to translate this into React Native like this...
<Image source={require("../assets/images/spritesheet.png")} style={styles.menuIcon} />
const styles = StyleSheet.create({
menuIcon: {
width: 30,
height: 30,
},
})
But apparently there is no background position attribute in React Native.
Did you try
<ImageBackground />
This might help with your issue
How do you increase the clickable area surrounding the nobs of Vuetify's v-slider component?
I would like to do this in order to make it easier for users to 'grab the nob' and control the slider, particularly for the sake of mobile UX.
Here is a method to increase the clickable area of the draggable v-slider and v-range-slider nobs using CSS. It should be noted that, as of February 2021, v-slider and v-range-slider do not yet have built-in props to control this functionality.
My answer is based on this github comment (note: it is worth reading this entire github issue thread, as it concerns the OP's question).
<style scoped lang="scss">
.my-slider-class >>> .v-slider__thumb:after {
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
content: '';
color: inherit;
width: 400%;
height: 400%;
border-radius: 50%;
background: transparent;
position: absolute;
left: -150%;
top: -150%;
}
.my-slider-class >>> .v-slider__thumb:before {
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
content: '';
color: inherit;
width: 200%;
height: 200%;
border-radius: 50%;
background: currentColor;
opacity: 0.3;
position: absolute;
left: -50%;
top: -50%;
transform: scale(0.1);
pointer-events: none;
}
</style>
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 single div element in a page styled as follow:
div {position: absolute; width: 340px; height: 480px; overflow-y:scroll}
I use a simple jquery script to center it in the available width and height on window.resize event.
The div is displayed and works perfectly on Safari 5 for Mac.
On Safari 5 for Windows it works perfectly (i can scroll the content using the mouse wheel) but the vertical scrollbar is not rendered.
Any idea?
Thanks in advance.
There's no need to use jquery to center, just use the following:
div {
position: absolute;
width: 340px;
height: 480px;
overflow-y: scroll;
top: 50%;
left: 50%;
margin-top: -240px;
margin-left: -170px;
}
Maybe the scrollbar is not rendered because it's disabled (there's no more content), otherwise try with overflow-y:auto