No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

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

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

    Help
    2
    2
    326
    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
      • F
        friesen last edited by

        <style scoped lang="scss">
        
        .q-tab {
          &::v-deep {
            .q-tab__content {
              flex-wrap: wrap !important;
            }
          }
        }
        
        .q-tabs {
          &::v-deep {
            .q-tabs__content {
              flex-wrap: wrap !important;
            }
          }
        }
        
        </style>
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post