vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
https://www.creative-tim.com/vuematerial
MIT License
9.88k stars 1.16k forks source link

Remove forced inline styles? #2177

Open careb0t opened 4 years ago

careb0t commented 4 years ago

How can I stop an inline style from being applied to a certain element? I'm wanting to combine the persistent="mini and permanent="clipped" drawers, and it works seamlessly, other than a random container div getting padding-left: 70px when the drawer is closed.

    <md-app>
      <md-app-toolbar md-elevation="0">
        <span class="md-title" style="flex: 1">{{organization.name}}</span>
        <md-menu md-size="small" md-direction="bottom-start" md-align-trigger>
          <md-button class="md-icon-button" md-menu-trigger>
            <md-icon>person</md-icon>
          </md-button>
          <md-menu-content>
            <md-menu-item>Profile</md-menu-item>
            <md-menu-item>Log Out</md-menu-item>
          </md-menu-content>
        </md-menu>
      </md-app-toolbar>

      <md-app-drawer :md-active.sync="menuVisible" md-persistent="mini" md-permanent="clipped">
        <md-list>
          <md-list-item @click="menuVisible = !menuVisible">
            <md-icon class="mx-0 my-0">menu</md-icon>
          </md-list-item>
          <a href="#dashboard" class="mt-3">
            <md-list-item>
              <md-icon>dashboard</md-icon>
              <span class="md-list-item-text">Dashboard</span>
            </md-list-item>
          </a>
          .
          .
          .
          .
          <a href="#">
            <md-list-item>
              <md-icon>settings</md-icon>
              <span class="md-list-item-text">Settings</span>
            </md-list-item>
          </a>
        </md-list>
      </md-app-drawer>

      <md-app-content>
        <slot></slot>
      </md-app-content>
    </md-app>
  </div>

<md-app-content> has a parent element that looks like this, which is receiving the unwanted inline style for padding.

Screen Shot 2020-02-11 at 1 18 31 PM

How can I prevent this behavior? I've already tried applying padding-left: 0px with and without an !important tag in a variety of different methods, but none of them are doing the trick unfortunately.