There is a class added .no-wrap that returns the css: flex-wrap: no-wrap; by the components renderer. I’m trying to override this with a flex-wrap: wrap.

I’ve tried using v-bing:class and :style.

as one example:

<script>
export default {
  data () {
    styleObject: {
        flexWrap: 'wrap !important',
      }
  }
}
</script>

<template>
  <the-component :style="styleObject" </the-component>
</template>

Using the above example, Chrome’s inspector shows that the component is inlined with style="flex-wrap: wrap !important;" and the .no-wrap class is overridden (crossed-out) but that is not what is rendered - its still wrapping.

Is there and how can I override the render staticClass that the component injects??

I looked at the code avail here but I don’t know how to override it.

There’s a CodePen here. However, I cannot get the viewport to work correctly.

The concept is that the component wrapps on smaller screen widths and I’m wanting to override this like:

@media (max-width: 599px) {
  .no-wrap {
    flex-wrap: wrap !important;
  }
}

I had to use a custom call back for toggling the drawer that toggles both the q-layout-drawer and a custom app-drawer-footer component that uses v-show.

This seems to work well on the desktop break-point, however, not on mobile -> The Drawer toggles as expected in both cases but not the DrawerFooter ( the footer only toggles via the header-btn which is hidden when the drawer is open ). I think I need to use the @on-layout(Boolean) to fire it on the overlay(??) but I can not figure out how.

Below is the mothods I’m currently using.
Any help will be greatly appreciated!

data() {
  return {
    leftDrawerOpen: false,
    leftDrawerFooterShow: false,
  }
},

created() {
  // listen for menu btn in LayoutHeader.vue to toggle the leftDrawer
  this.$bus.$on('toggleLeftDrawer', this.LeftDrawerCallBack)
  // Animates the leftDrawer to open when app finishes loading
  this.LeftDrawerCallBack()
},

methods: {
  LeftDrawerCallBack() {
    // Toggle the leftDrawer
    this.leftDrawerOpen = !this.leftDrawerOpen
    // Toggle the LeftDrawerFooter
    this.leftDrawerFooterShow = !this.leftDrawerFooterShow
  },
  // loadRoute() {
  // },
},