Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    1
    1
    80
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • o'kennedy
      o'kennedy last edited by

      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;
        }
      }
      
      1 Reply Last reply Reply Quote 0
      • First post
        Last post