q-table title-class not working
dobbel last edited by
Did you try
@cwoodman Does it work if you remove the
scopedmodifier on the style tag? You probably do want it to be scoped, but that’s what I would check first. Otherwise, check in inspect element and see if that rule is being applied, but overwritten by something else.
Yes, removing ‘scoped’ lets it show. But I need it to be scoped.
I have a global style in app.styl: .q-table__top, thead tr:first-child th
This overrides the scoped style. If I comment that out in app.styl, there doesn’t seem to be any style applied unless I remove scoped from the local one.
Is this title-class prop supposed to work?
@cwoodman By default with scoped styles, you can’t target a child component’s internals. That’s intentional as the scoped style is meant to prevent styles from affected children. It sound then like you just need to use a deep selector, like this:
<q-table class="recipe-units-table non-selectable q-mx-sm q-mt-sm" dense square title="Default Units for new recipes:" title-class="table-title" :data="defaultMeasures" :columns="defaultColumns" hide-bottom >
<style lang="stylus" scoped> .recipe-units-table >>> .table-title background-color: $blue-grey-1 color: $indigo-10 .recipe-units-table >>> thead tr:first-child th background-color: $blue-grey-1 color: $indigo-10 </style>
Notice the new class on the q-table, and the deep
>>>selector : https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
@beets OK, that works! Now the style is showing.
But the background-color only affects the title text. How can I set the background of the containing box for the title?
.recipe-units-table >>> .q-table__top background-color: $blue-grey-1
@beets OK that does the trick! Thanks a bunch!
Oh, one more thing…
How can I center the text? text-align doesn’t have any effect.
@cwoodman This should work:
.recipe-units-table >>> .q-table__top background-color: $blue-grey-1 justify-content: center
@beets Yes. You’re the best! Thanks again.
@cwoodman No problem, glad to help!