Unable to align sidebar and it contents in Element-UI in vue-js

Question

I am a newbie in vue-js and currently using element-ui as UI component library. I am trying to use sidebar and have following code(click here for jsfiddle):-

<template>
<div>

<el-menu default-active="1" class="el-menu-vertical-demo" :collapse="true">
  <el-menu-item index="1">
    <i class="el-icon-money"></i>
    <span slot="title">Consent</span>
  </el-menu-item>
  <el-menu-item index="2" @click="signOut">
    <i class="el-icon-switch-button"></i>
    <span slot="title">Logout</span>
  </el-menu-item>
</el-menu>
<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="arn"
        label="ARN"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="Phone Number"
        width="180">
      </el-table-column>
      <el-table-column
        label="Status"
        prop="address">
          <el-badge value="Applied" class="item" type="primary"></el-badge>
      </el-table-column>
    </el-table>
</div>
</template>
<style>
  
</style>

<script>
import * as firebase from "firebase/app";
import "firebase/auth";
  export default {
    data() {
        return {
          tableData: [{
            arn: 'XXXXXX1',
            phoneNumber: 'XXX0',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            arn: 'XXXXXX1',
            phoneNumber: 'XXX0',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            arn: 'XXXXXX1',
            phoneNumber: 'XXX0',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            arn: 'XXXXXX1',
            phoneNumber: 'XXX0',
            address: 'No. 189, Grove St, Los Angeles'
          }]
        }
      },
    methods: {
      ...
    }
  }
</script>

As shown in the above jsfiddle link, table isn't getting aligned towards right of sidebar. I searched about it in its documentation but couldn't get much of help.

Would appreciate any hint.

kliank · Accepted Answer · 2020-07-31 06:50:58Z

1

I'm not sure if I understood your question, but you could just apply next css rule

.el-table .cell {
  text-align: right;
}

inside de <style></style> tags

Here you have a jsfiddle with the rule applied

answered Jul 31, 2020 at 6:50

kliank

416 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kliank Over a year ago

@VINEETSHARMA maybe like this jsfiddle.net/3dke1t8h

Vineet Over a year ago

putting el-menu and el-table in separate divs worked!

dreijntjens · Accepted Answer · 2020-08-02 10:33:39Z

0

Why not using the layout system of element-ui?

<el-container>
    <el-aside></el-aside>
    <el-main></el-main>
</el-container>

example: https://jsfiddle.net/dreijntjens/ba9zq7wt/10/

note: by default the aside has a width of 300px, if you only want to use the el-menu width you have to unset the width <el-aside width="unset"> or as I did on the tag itself or

.el-aside {
    width: unset !important; // !important
}

answered Aug 2, 2020 at 10:33

dreijntjens

4,84528 silver badges30 bronze badges

Comments

soroush · Accepted Answer · 2020-07-31 07:17:31Z

0

Try this css or style :

<style>
#app {
  display: flex
}
</style>

It make side bar in left side of table

By changing order of table and sidebar it would be in right side

<div id="app">

   <el-table>
   ...

   </el-table>   

   <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="true">
   ....

answered Jul 31, 2020 at 7:17

soroush

7566 silver badges10 bronze badges

Collectives™ on Stack Overflow

Unable to align sidebar and it contents in Element-UI in vue-js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related