Issue
I want to implement custom components, like the following picture:
ps: It's actually a component of an element(https://element.eleme.io/#/en-US/component/upload).
when I move my mouse on the picture, it shows a translucent background.
So I write the code:
<div id="app">
<div>
<div class="container" v-for="n in arr.length" :key="n">
<!-- unexpected result -->
<div v-show="arr[n-1]" >test</div>
</div>
</div>
</div>
the middle yellow div with 'test' string is off the bottom. It's unexpected.
the following picture is the expected result:
I just set the position of the div, it worked!
<div v-show="arr[n-1]" style="position:absolute; top:0">test</div>
Why do I have to set this style to get the correct result?
check it in https://jsfiddle.net/uzvhq2jw/
Solution
To achieve expected result, use vertical-align: top
; for the container
.container{
width:200px;
height:200px;
background:yellow;
margin:10px;
display:inline-block;
vertical-align:top;
}
Issue: Inline block element with content will be moved down due to its default vertical-align property as baseline
working code for reference
codepen - https://codepen.io/nagasai/pen/LwRYPm
new Vue({
el: "#app",
data: {
arr: [false, true, false]
},
methods: {}
})
.container {
width: 200px;
height: 200px;
background: yellow;
margin: 10px;
display: inline-block;
vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div class="container" v-for="n in arr.length" :key="n">
<!-- unexpected result -->
<div v-show="arr[n-1]">test</div>
<!-- expected -->
<!-- <div v-show="arr[n-1]" style="position:absolute; top:0">test</div> -->
</div>
</div>
</div>
Answered By - Naga Sai A
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.