CODEWITHSUNDEEP
htmlcssvue.jsgridsidebar
Olga B
Olga B

Reputation: 513

CSS: Fixed-sidebar in Vue.js

I am creating a layout where a sidebar will be fixed on the left and placed next to a container which will have its own grid. I use Vue.js so every template has its <div> where I need to put other <div>s with the sidebar or the main content. Seems like my layout doesn't want to accept my CSS rules when I try to place my sidebar or give it a color, etc. Please help!

Here is my layout:

<template>
 <div>
  <sidebar />
  <main-content />
 </div>
</template>

Where the sidebar is:

<template>
<div>
<div class="sidebar">
  <div id="logo">
    <img src="" />
  </div>
  <h1><a href="#">Company</a></h1>
  <ul>
    <!--<li><a href="#">About</a></li>-->
    <!--<li><a href="#">Popular</a></li>-->
    <!--<li><a href="#">News</a></li>-->
    <!--<li><a href="#">Pages</a></li>-->
    <li><a href="#">Users</a>
      <ul id="sublist">
        <li><a href="#">Import</a></li>
        <li><a href="#">Invitations</a></li>
      </ul>
    </li>
    <!--<li><a href="#">Organisations</a></li>-->
    <li><a href="#">Polls</a></li>
  </ul>
 </div>
</div>
</template>

And the main content is (there is a table component inside):

<template>
<div>
<div class="container-grid">
  <div class="header">
    <h2>Users</h2>
    <button>Add</button>
    <h3>Import users</h3>
  </div>
  <main-table />
 </div>
</div>
</template>

Here is my CSS:

.sidebar {
height: 100%;
width: 300px;
max-width: 1024px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
box-sizing: border-box;
}
h1 {
display: inline;
height: 29px;
width: 156px;
}
ul,
#sublist {
list-style: none;
margin: 0;
padding: 0;
}
a {
height: 20px;
width: 200px;
text-decoration: none;
display: block;
}

// Main Content Style

.container-grid {
margin-left: 336px;
}

Upvotes: 3

Views: 9533

Answers (3)

connor.gregson
connor.gregson

Reputation: 61

Something like this:
HTML:

    <section>
        <p>sidebar</p>
    </section>
    <section>
        <h2>Section1</h2>
        <p>section1 whatever data you want to put in this section</p>
    </section>
    <section>
        <h2>Section2</h2>
        <p>section1 whatever data you want to put in this section</p>
    </section>
    <section>
        <h2>Section3</h2>
        <p>section1 whatever data you want to put in this section</p>
    </section>
    <section>
        <h2>Section4</h2>
        <p>section1 whatever data you want to put in this section</p>
    </section>

CSS:

    section:first-child { 
        width: 20%;
        height: 100vh;
    }
    section {
        width: 80%;
        float: left;
    }

But you'd need to change the height: 100vh; to something that will cover the whole page hight and not just the veiwport hight.

Doing this means all the other sections will be to the right of the first one (where you would put your sidebar)

Upvotes: 1

Stephan-v
Stephan-v

Reputation: 20299

This is not the answer to your question but just a heads up.

You do not need to wrap your components with a div every time. You just need to ensure that you only ever have 1 root element.

This means if you have 2 elements like this you do need to wrap them:

<template>
    <div>
        <span></span>
        <span></span>
    </div>
</template>

But a single span element you can simple leave in your template like so:

<template>
    <span></span>
</template>

Upvotes: 3

Roy J
Roy J

Reputation: 43881

It works as expected here in the snippet, except I had one puzzling thing: it would not style .container-grid for me. I finally figured out that the reason was the embedded comment (// Main content style), which is not valid css. I don't know whether that might be an issue in your development environment.

new Vue({
  el: "#app",
  components: {
    sidebar: {
      template: '#sidebar-template'
    },
    mainContent: {
      template: '#main-template'
    }
  }
});
.sidebar {
  background-color: #fee;
  height: 100%;
  width: 150px;
  max-width: 1024px;
  opacity: 0.5;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

h1 {
  display: inline;
  height: 29px;
  width: 156px;
}

ul,
#sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  height: 20px;
  width: 200px;
  text-decoration: none;
  display: block;
}

.container-grid {
  background-color: #eef;
  margin-left: 180px;
}
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <sidebar></sidebar>
  <main-content></main-content>
</div>

<template id="sidebar-template">
<div>
<div class="sidebar">
  <div id="logo">
    <img src="" />
  </div>
  <h1><a href="#">Company</a></h1>
  <ul>
    <!--<li><a href="#">About</a></li>-->
    <!--<li><a href="#">Popular</a></li>-->
    <!--<li><a href="#">News</a></li>-->
    <!--<li><a href="#">Pages</a></li>-->
    <li><a href="#">Users</a>
      <ul id="sublist">
        <li><a href="#">Import</a></li>
        <li><a href="#">Invitations</a></li>
      </ul>
    </li>
    <!--<li><a href="#">Organisations</a></li>-->
    <li><a href="#">Polls</a></li>
  </ul>
 </div>
</div>
</template>

<template id="main-template">
<div class="container-grid">
  <div class="header">
    <h2>Users</h2>
    <button>Add</button>
    <h3>Import users</h3>
  </div>
 </div>
</template>

Upvotes: 1

Related Questions