CODEWITHSUNDEEP
javascriptvue.jselement-ui
Antonio Guerrero
Antonio Guerrero

Reputation: 73

fixed side component using element ui vue js

I am designing a post sale and I need the panel containing the list of products to be fixed on the left side. Maybe there is a library or component that I can use? I am using element ui.

As a reference I leave the image of odoo post, the left side product list has no movement (scroll):

enter image description here

<template>
     <div class="dashboard-editor-container">
         <el-row :gutter="10">
             <el-col :span="12">
                         ree

             </el-col>

             <el-col :span="12">

                 <el-card class="fixed-content">
                          <div slot="header" class="clearfix">
                        <span>List Product</span>
                        <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
                    </div>
                 </el-card>

             </el-col>
         </el-row>


     </div>
</template>


<style lang="scss" scoped>

.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  width: 100%;

}

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
    margin-right: 0px
}

</style>

I hope you can give me suggestions and if my question is incorrectly written please correct me, thanks.

Upvotes: 0

Views: 2674

Answers (1)

meavo
meavo

Reputation: 1042

With just a bit of HTML and CSS I think you can quite easily reach your goal:

HTML

<div class="wrapper">
  <aside class="wrapper__aside">
    <!-- products here -->
  </aside>
  <main class="wrapper__body">
    <!-- main content here -->
  </main>
</div>

CSS

.wrapper {
  position: relative;
}

.wrapper__aside {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 25%;
}

.wrapper__body {
  margin-left: 25%;
}

The key is to have a relative positioned container around the fixed element. Also to correct the width of the fixed element, you need to add a margin to compensate.

Upvotes: 1

Related Questions