Topic: getting the previous width of the mdb-side-nav after collapse

eladhr83 free asked 3 years ago

Hi, I am trying to get the of side-nav-bar after pressing the mdb-vue toggle button.

After I am pressing the button of the collapse(toggle), I checking the width and always getting the previous value. Is there a way to get the current one?

Here I am trying to get the width with toggleSideNav:

    <mdb-side-nav slim :isCollapsed="collapsed" :name="userName" :OpenedFromOutside="true" id="sideNavContainer"
              logo="/static/img/user.54e9ec53.png" logoRound>
    <mdb-icon class="position-absolute custom-collapse" icon="arrow-left" v-if="!collapsed"
    <mdb-icon class="position-absolute custom-collapse" icon="arrow-right" v-if="collapsed"
    <mdb-side-nav-nav class="text-capitalize actions">
        <mdb-side-nav-item icon="user-circle" to="/my-profile"></mdb-side-nav-item>
        <mdb-side-nav-item icon="sign-out-alt" href="javascript:void(0);" @click.native="openLogoutModal">
    <mdb-side-nav-nav class="text-uppercase mt-4 products">
        <mdb-side-nav-item class="mb-4" icon="spa" to="/cropy">CROPY</mdb-side-nav-item>
        <mdb-side-nav-item class="mb-4" icon="chart-line" to="/vincent">VINCENT</mdb-side-nav-item>
        <mdb-side-nav-item icon="adjust" href="javascript:void(0);">SOCIAL</mdb-side-nav-item>

toggleSideNav() {
    this.collapsed = !this.collapsed;
    // alert width from dom

Magdalena Dembna staff answered 3 years ago

This sidenav has a fixed width depending on its state (3.75 rem if it's collapsed and 15 rem if not). You're not getting a correct value because you're not selecting the sidenav itself but the wrapper with a different width. I suggest basing layout on those two predefined values as you won't be able to add ref or id attribute to the inner elements. You can create a computed value:

computed: {
    width() {
          return this.collapsed ? '3.75rem' :  '15rem';

Kind regards, Magdalena

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.2.0
  • Device: pc
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No