How to make Vue2-leaflet map have 100% height of its parent container?
When I set its style to style="height: 100%" it is overwriting whole page on first interaction with the map and tile layer isn't showed at all.
Use calc(100% - 100px) for #map-wrapper because #some-div has a height of 100px in your example.
Then the scrollbar disappears.
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: calc(100% - 100px);
margin: 0;
}
Fiddle: https://jsfiddle.net/yLe9n1uk/
Or use a flexbox for the parent div (#app):
#app {
display: flex;
flex-direction: column;
}
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: 100%;
margin: 0;
}
Fiddle: https://jsfiddle.net/xo5z8r7q/
Related
I am using bootstrap vue and am trying to animate/transition the drop downs. This is proving to be fairly difficult as they do not use v-if or v-show so the transition will not work. Alternatively because the way the components work if you use v-if the drop down trigger will be hidden. I can't find anything online to bootstrap vue specifically on this but I feel this shouldn't be as tough as it has turned out to be. thanks for any help you can give
<div id="app">
<b-navbar type="dark" fixed>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Tools">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
// This won't work as it hides the main dropdown trigger right form the start
<b-nav-item-dropdown text="Tools" v-if="toggleDropdown">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</div>
<script>
export default {
name: 'nav',
data () {
return { toggleDropdown: false }
},
mounted: function () {
// I can listen for events here but I still can't trigger the transition
this.$root.$on('bv::dropdown::show', bvEvent => {
this.toggleDropdown = true
})
this.$root.$on('bv::dropdown::hide', bvEvent => {
this.toggleDropdown = false
})
}
}
</script>
<style lang="scss">
.navbar {
.dropdown-menu {
transform-origin: top;
transition: transform 10s ease-in-out;;
}
}
.dd-slide-enter,
.dd-slide-leave-to { transform: scaleY(0); }
</style>
It's pretty hard to achieve a clean slide-up/down animation because BootstrapVue uses display:none/block to hide/show the dropdown menu. What you can do it's manipulate the max-height of the element as explained here.
I added an 'animated' class to the parent element, for example your b-navbar to select which dropdown has to be animated. Then i removed display: none from the default status of the dropdown and hidden it setting its max-height and padding to 0 and its border to none. When you click the button the dropdown gets the class 'show'so you can give it a max-height different than 0, as explained in the answer i've linked to you, you have to set it higher than the actual height of the dropdown menu otherwise it gets cropped out.
.animated {
.dropdown-menu {
overflow: hidden;
display: block!important;
max-height: 0!important;
&:not(.show) {
padding: 0;
border: none;
}
&.show {
transition: max-height 300ms ease-in-out;
max-height: 500px!important; //this must have to be higher than the max height of the dropdown list
}
}
}
Just came across this same issue.
Ended up following with previous example, but this one works for both up/down transitions and doesn't mess with overflows in case you want to add triangles.
.dropdown-menu {
border: 1px solid #ebeef5;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.25);
// Slide down transtion
display: block !important;
&:not(.show) {
padding: 0px;
border-width: 0px;
border-color: transparent;
box-shadow: none;
transition: padding 1.3s ease, border-width 1.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
> li {
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease;
}
&.show {
> li {
max-height: 100px;
}
}
// Add chevron to top
&[x-placement^="bottom"] {
&::before {
content:"";
position: absolute;
right: 11px;
top: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
z-index: 99999999;
}
}
// Add chevron to bottom
&[x-placement^="top"] {
&::after {
content:"";
position: absolute;
right: 11px;
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #fff transparent transparent transparent;
z-index: 99999999;
}
}
}
Am creating an image editor library with the support of KinetiJS.
In my html,
<div id="editorarea" class="fill">
<div id="imageContainerDiv" class="imageContainerDiv" >
<div>....</div>
<div>....</div>
<div id='rotateouterDiv' class='rotateouterDiv' >
<textarea placeholder='Enter You Text here' id='inputField' name='graffiti' class='textContainerMob'></textarea>
</div>
<div id='imageContainer'></div>
</div>
</div>
Then creating a stage
_kineticStage = new editor._Stage({
container : 'imageContainer',
width : $('#editorarea').width(),
height : $('#editorarea').height()
});
Kinetic.Util.extend(editor._Stage, Kinetic.Stage);
And adding an image,
_kineticImage = new editor._Image({
x : 0,
image : img,
y : 0,
draggable : true,
});
layer.add(_kineticImage);
The CSS applied is,
#editorarea {
width: 100%;
height: 80%;
margin-top: .1%;
min-height: 70%%;
display: block;
border-width: 2px;
border-style: solid;
}
.fill {
min-height: 85%;
height: 90%;
}
.imageContainerDiv {
width: 100%;
height: 100%;
z-index: 0;
left: 0;
right: 0;
background-color: #FFF;
display: block;
background-image: url(../images/back_pattern.png);
background-repeat: repeat;
overflow: hidden;
}
The textarea should be on the top of the image. In this case, I placed that div containing the textarea using the #media queries, for supporting different screen size and orientation.
The issue occurs when following the steps: load the page in portrait, then change the device orientation to landscape. Then the position of textarea is not correct. This is because the kinetic stage is not properly resizing on orientation change (only the area with image).
Can anyone help me to resize it properly? This should work in touch devices.
Thanks...
I have a site made of "slides" 100% height.
<div class="slide" id="one">page1</div>
<div class="slide" id="two">page2</div>
<div class="slide" id="three">page3</div>
I use waypoints to perform some animation based on the position of the scroll, and it works fine. The context used is "window" and below an example:
$('#one').waypoint(function(direction)
{
//do something
}, { offset: '75%' });
By the way, in a slide there is a button that modifies the height of an image (it becomes very big), so after the resize the height of the container changes and also the height of the "slide", too.
I need the waypoint to refresh, in order to be raised at the same percentage calculated on the new size of the slide. I tried to do
$.waypoints('refresh');
after the resize, but it seems not working.
Below a piece of my css:
html {
height: 100%;
}
body{
text-align:center;
height:100%;
margin: 0 auto;
overflow-x: hidden;
}
.slide{
height: 100%;
margin: 0 auto;
background: white;
min-height: 700px;
min-width: 1024px;
}
#home {
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
min-height: 800px;
}
Can someone help me?
I'm trying to make the images inside bootstrap carousel responsive in terms of height first, width second. This is because the images I'm adding to the carousel are for the most part of larger height than width although I should write the css where it will look the same regardless of the image dimensions.
I am overriding the class on my styles rather than modifying the bootstrap stylesheet because I prefer to load bootstrap using CDN.
The class I'm adding to my style is
.carousel-inner > .item > img {
position: absolute;
top: 0px;
left: 0px;
height: auto;
max-width: 100%;
}
The height: auto and max-width: 100% works great. The problem I run into is that the .carousel .item has a height of 500px. bootstrap.css line 49.
.carousel .item {
height: 500px;
background-color: #777;
}
I can't give the class shown above a height of auto because the image then is not visible. If I leave it as such, images with a height over 500px get cut off, images smaller will make the carousel seem out of proportion.
Any help on this will be greatly appreciated. Thanks in advance.
This seems to work.
I placed the carousel within a carousel-container div and added the following to my css:
.carousel, .carousel-inner > .item {
display: run-in;
width: 100%;
height: auto!important;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
}
.carousel-container {
margin-left:0;
}
I have 2 inline divs inside a parent div:
.parent {
width: 200px;
height: 200px;
}
.div1 {
float: left;
width: 10px;
height: 10px;
background-color: blue;
}
.div2 {
position: relative;
height: 100%;
width: 100%;
right: 0px;
float: left;
background-color: red;
}
The problem is that div2 inherits the width of the parent div instead of the remaining width (i.e. 190px) and ultimately div2 ends up below div1.
Here is an example using jsfiddle: http://jsfiddle.net/jZBE6/
How can I make div2 have a width of 190px without setting a static width?
You could do it this way:
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:90%;
float:left;
background-color:red;
}
You could also do it without floating the right div (this is the way I would prefer):
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:100%;
margin-left:10px;
background-color:red;
}
in case you really want a dynamic width (not just 10px case), you can't use css. But you can use javascript to set width dynamically http://jsfiddle.net/jZBE6/19/