z index 1 doesn't stop modal from pushing down index 0 content
Hi all I have a modal that I made, I set it to have a z-index of 1 and the component its inside of has a z-index of 0 however the modal still stretches the component when it pops up even though it sits ontop of the content like you see in the image below
I would like to make the modal overlay without stretching this component down as it pushes all the other content down which I want to avoid I'm not sure of the best way to accomplish this because the component in purple is reused across multiple views inside my `vue router. I will show the code for my component :) any suggestions on how to accomplish this are appreciated
<template>
<div id="topbarContainer" v-bind:class="{ modalbackground: modal }">
<!-- TOPBAR -->
<div class="topbar">
<h6 id="dashboard">{{name}}</h6>
<div class="searchContainer">
<b-icon-search></b-icon-search>
<small>search</small>
<input class="searchbar" type="text" />
<small class="searchbtn">H</small>
</div>
<div id="topbarRightdiv">
<img class="topbarButtons" src="../assets/superdash/chat-1.png" width="30px" height="30px" />
<img class="topbarButtons" src="../assets/superdash/notifications.png" width="30px" height="30px" />
<img class="topbarButtons" src="../assets/superdash/photo.png" width="30px" height="30px" />
<p id="profileName" @click="showModal">Hemlin <small id="profileArrow">▼</small></p>
</div>
<!--modal -->
<div v-if="this.modal==true" class="modal-content">
<section class="modalSection ModalsectionHeader">
<img class="modalImg" src="../assets/topbar/profile_icons-2.svg"/> <p id="darkmodeText">Dark Mode</p> <img class="modalImg" src="../assets/topbar/togle.svg" @click="toggleDarkmode" v-if="darkmode==true"/> <img class="modalImg" src="../assets/topbar/togle.svg" @click="toggleDarkmode" v-if="darkmode==false"/>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons.svg"/> <p>Profile</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-1.svg"/> <p>Wallet</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-3.svg"/> <p>Saved</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-4.svg"/> <p>Get Reports</p> <small>></small>
</section>
</div>
</div>
<!-- TOPBAR -->
</div>
</template>
<script>
export default {
name: 'Topbar',
props: ['name'],
data:function(){
return{
modal: false,
darkmode: false,
}
},
methods:{
showModal(){
console.log("clicked")
this.modal = !this.modal
}
,toggleDarkmode(){
console.log('darkmode')
this.darkmode = !this.darkmode
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#topbarContainer{
z-index: 0;
}
.modalbackground{
background-color: rgba(128, 0, 128, 0.555);
}
.topbar{
display: flex;
font-size: 12px;
font-family: 'Noto Sans JP', sans-serif;
}
#topbarRightdiv{
display: flex;
margin-left: 9em;
}
#topbarRightdiv p{
display: flex;
}
#profileName{
font-size:14px;
padding-top: 1em;
}
#profileName:hover{
cursor: pointer;
}
#profileArrow{
color: #39b3fac5;
}
#profileArrow:hover{
color: #39d3fa;
cursor: pointer;
}
#dashboard{
margin-top: 1em;
padding-left: 1em;
margin-right: 5em;
}
.searchContainer{
margin-top:1em;
margin-left: 1em;
margin-right:3em;
width: 60%;
border-style: none;
border-radius: 13px;
background-color: white;
height: 2em;
box-shadow: 0 1px 2px #88888877;
}
.searchbar{
border-style: none;
border-radius: 13px;
width: 85%;
padding-right: 1em;
}
.searchbtn{
margin-left: .5em;
color: rgb(73, 79, 90);
border-left: 1px rgb(185, 187, 204) solid;
padding-left:1em;
}
.topbarButtons{
margin: 1em;
border-radius: 100%;
background-color: #87b9fa1a;
}
/* Modal Content/Box */
.modal-content {
z-index: 1;
position: relative;
right: 50px;
width: 30em;
height: 20em;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
}
.modalSection{
padding-top: .5em;
display: flex;
width: 100%;
justify-content: space-between;
}
.ModalsectionHeader{
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px solid rgba(97, 95, 95, 0.267);
}
#darkmodeText{
margin: .2em
}
.modalImg{
width: 25px;
height: 25px;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
Solution
Try to change the position to absolute :
.modal-content {
z-index: 1;
position: relative; <---HERE to absolute
new Vue({
el:'#demo',
props: ['name'],
data:function(){
return{
modal: false,
darkmode: false,
}
},
methods:{
showModal(){
console.log("clicked")
this.modal = !this.modal
},
toggleDarkmode(){
console.log('darkmode')
this.darkmode = !this.darkmode
}
}
})#topbarContainer{
z-index: 0;
}
.modalbackground{
background-color: rgba(128, 0, 128, 0.555);
}
.topbar{
display: flex;
font-size: 12px;
font-family: 'Noto Sans JP', sans-serif;
}
#topbarRightdiv{
display: flex;
margin-left: 9em;
}
#topbarRightdiv p{
display: flex;
}
#profileName{
font-size:14px;
padding-top: 1em;
}
#profileName:hover{
cursor: pointer;
}
#profileArrow{
color: #39b3fac5;
}
#profileArrow:hover{
color: #39d3fa;
cursor: pointer;
}
#dashboard{
margin-top: 1em;
padding-left: 1em;
margin-right: 5em;
}
.searchContainer{
margin-top:1em;
margin-left: 1em;
margin-right:3em;
width: 60%;
border-style: none;
border-radius: 13px;
background-color: white;
height: 2em;
box-shadow: 0 1px 2px #88888877;
}
.searchbar{
border-style: none;
border-radius: 13px;
width: 85%;
padding-right: 1em;
}
.searchbtn{
margin-left: .5em;
color: rgb(73, 79, 90);
border-left: 1px rgb(185, 187, 204) solid;
padding-left:1em;
}
.topbarButtons{
margin: 1em;
border-radius: 100%;
background-color: #87b9fa1a;
}
/* Modal Content/Box */
.modal-content {
z-index: 1;
position: absolute;
right: 50px;
width: 30em;
height: 20em;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
}
.modalSection{
padding-top: .5em;
display: flex;
width: 100%;
justify-content: space-between;
}
.ModalsectionHeader{
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px solid rgba(97, 95, 95, 0.267);
}
#darkmodeText{
margin: .2em
}
.modalImg{
width: 25px;
height: 25px;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div id="topbarContainer" v-bind:class="{ modalbackground: modal }">
<!-- TOPBAR -->
<div class="topbar">
<h6 id="dashboard">{{name}}</h6>
<div class="searchContainer">
<b-icon-search></b-icon-search>
<small>search</small>
<input class="searchbar" type="text" />
<small class="searchbtn">H</small>
</div>
<div id="topbarRightdiv">
<img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
<img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
<img class="topbarButtons" src="https://picsum.photos/30" width="30px" height="30px" />
<p id="profileName" @click="showModal">Hemlin <small id="profileArrow">▼</small></p>
</div>
<!--modal -->
<div v-if="this.modal==true" class="modal-content">
<section class="modalSection ModalsectionHeader">
<img class="modalImg" src="https://picsum.photos/30"/> <p id="darkmodeText">Dark Mode</p> <img class="modalImg" src="https://picsum.photos/30" @click="toggleDarkmode" v-if="darkmode==true"/> <img class="modalImg" src="https://picsum.photos/30" @click="toggleDarkmode" v-if="darkmode==false"/>
</section>
<section class="modalSection">
<img class="modalImg" src="https://picsum.photos/30"/> <p>Profile</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="https://picsum.photos/30"/> <p>Wallet</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="https://picsum.photos/30"/> <p>Saved</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="https://picsum.photos/30"/> <p>Get Reports</p> <small>></small>
</section>
</div>
</div>
<!-- TOPBAR -->
</div>
</div>- Converting enums to array of values (Putting all JSON values in an array)
- Calculate the date yesterday in JavaScript
- Embedding youtube video "Refused to display document because display forbidden by X-Frame-Options"
- ExpressJs in undefined value get (to show [object])
- Ag-grid cell editors with dynamic Parameters: use global variable
- How to pass state.params in react-native
- I want to get option selected with js?
- body data not sent in axios request
- How to track onchange as-you-type in input type="text"?
- This weird piece of code I always see in Javascript
- Generate random string/characters in JavaScript
- Why does `+ ! {} [true]` evaluate to 1?
- Electron - Is there a way to run code after throwing an error?
- Why does a function declared inside a conditionally-executed block appear to exist before the block is entered?
- how many times a value is repeated in an array of objects
- Why does naming a function expression not make the name accessible within the scope, but still possible to delete?
- The assigned innerHTML results in a different structure
- Which is preferred: inline function expressions or stand-alone function declarations?
- How to pass inline style with props in react js?
- Add tab with active and ng-repeat in uib-tab
- Detect backspace and del on "input" event?
- Detecting arrow key presses in JavaScript
- How can I add an event for a one time click to a function?
- Applying InputAdornment to MUI AutoComplete removes the options list
- How to have a pop-up for a download on my navbar?
- How to fix dark mode background color flicker in NextJS?
- Why would a JavaScript function check if `this` is `instanceof` that same function?
- Why my function in Javascript is not working?
- Not able to change the title with metadata when using 'use client' in Next.js
- Extract hostname name from string