QTab: How To Override The staticClass .no-wrap?



  • 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;
      }
    }
    

Log in to reply