[Vuejs]-ElementUI : right submenu appears truncated (CSS)

by

2👍

✅

You can change the position properties of the menu in the css. Reset the left value, and add right: 0

new Vue({
    el: '#app'
    });
.el-menu--horizontal .el-submenu > .el-menu {
  left: initial !important;
  right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>

<div id="app">
    <el-menu class="el-menu" mode="horizontal">
        <el-submenu index="4" style="float: right;">
            <template slot="title"><i class="el-icon-menu"></i></template>
            <el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
            <el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
        </el-submenu>
    </el-menu>
</div>
👤sol

Leave a comment