CODEWITHSUNDEEP
cssvue.jsvuejs2
iamrobin.
iamrobin.

Reputation: 1634

position component on top of fixed app.vue

I have a splitted layout, like you can see in the following example screens. By default the fixed app vue content takes 40% of the interface left and the router view 60% on the right.

Now the problem: one of the components, in this example router link 3 should be fullscreen. I don't know how the router component can overlap the app vue. It's always beneath it.

router link 1: link1

router link 2: link2

router link 3: link3

Here is my current code

app.vue:

<template>
<div class="left">
  <router-link to="/link1">
  <router-link to="/link2">
  <router-link to="/link3">
</div>

// some content

<router-view></router-view>
</template>

<style>
.left {
  width: 40%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

component 1 and 2:

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  margin-left: 40%;
  width: 60%;
  height: 100vh;
}
</style>

component 3:

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  width: 100%;
  height: 100vh;
}
</style>

Upvotes: 0

Views: 11839

Answers (2)

PrestonDocks
PrestonDocks

Reputation: 5408

You should also be able to use v-bind class to apply a class to a component already displayed on the page. That would give a similar result to what you see in WYSIWYG editors full page option.

Upvotes: 1

Jim B.
Jim B.

Reputation: 4694

You can use "position: absolute" on the style for the component3. You can also give it a higher z-index to make it appear on top. For example:

<template>
  <div class="container">
  // same content
  </div>
</template>
<style>
.container {
  display: inline-block;
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
}
</style>

Upvotes: 2

Related Questions