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

    q-table title-class not working

    Help
    3
    13
    1799
    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.
    • CWoodman
      CWoodman last edited by

      I have a table like this:

      <q-table
         class="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
       >
      

      and style like this:

      <style lang="stylus" scoped>
      .table-title
        background-color: $blue-grey-1
        color: $indigo-10
      thead tr:first-child th
        background-color: $blue-grey-1
        color: $indigo-10
      </style>
      

      The thead class works fine, but the title class does not have any effect.
      What am I doing wrong?

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @CWoodman last edited by

        @cwoodman

        Did you try !important ?

        1 Reply Last reply Reply Quote 0
        • CWoodman
          CWoodman last edited by

          Doesn’t help

          beets 1 Reply Last reply Reply Quote 0
          • beets
            beets @CWoodman last edited by

            @cwoodman Does it work if you remove the scoped modifier 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.

            1 Reply Last reply Reply Quote 0
            • CWoodman
              CWoodman last edited by

              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?

              beets 1 Reply Last reply Reply Quote 0
              • beets
                beets @CWoodman last edited by

                @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

                CWoodman 1 Reply Last reply Reply Quote 0
                • CWoodman
                  CWoodman @beets last edited by

                  @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?

                  beets 1 Reply Last reply Reply Quote 0
                  • beets
                    beets @CWoodman last edited by

                    @cwoodman Try:

                    .recipe-units-table >>> .q-table__top
                      background-color: $blue-grey-1
                    
                    CWoodman 1 Reply Last reply Reply Quote 0
                    • CWoodman
                      CWoodman @beets last edited by

                      @beets OK that does the trick! Thanks a bunch!

                      1 Reply Last reply Reply Quote 0
                      • CWoodman
                        CWoodman last edited by

                        Oh, one more thing…
                        How can I center the text? text-align doesn’t have any effect.

                        beets 1 Reply Last reply Reply Quote 0
                        • beets
                          beets @CWoodman last edited by

                          @cwoodman This should work:

                          .recipe-units-table >>> .q-table__top
                            background-color: $blue-grey-1
                            justify-content: center
                          
                          CWoodman 1 Reply Last reply Reply Quote 0
                          • CWoodman
                            CWoodman @beets last edited by

                            @beets Yes. You’re the best! Thanks again.

                            beets 1 Reply Last reply Reply Quote 0
                            • beets
                              beets @CWoodman last edited by

                              @cwoodman No problem, glad to help!

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post