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