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
    1. Home
    2. murrah
    M
    • Profile
    • Following 0
    • Followers 0
    • Topics 8
    • Posts 24
    • Best 3
    • Groups 0

    murrah

    @murrah

    3
    Reputation
    2
    Profile views
    24
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    murrah Follow

    Best posts made by murrah

    • RE: Auto generate a build number in SPA

      @Hawkeye64 Cool, thanks! That certainly takes it to another level. 🙂

      posted in Help
      M
      murrah
    • RE: [Solved] Tree filter: how to filter the tree from a button click in addition to search text

      So, I want to filter the tree by both a Search input box and / or a value passed by a button click that represents a status property on the leaf nodes. (Actually, there are 5 such buttons, each representing a different status, but for simplicity’s sake we pretend there is just one status value.)

      This is the stripped-down solution.

      <!-- The search input box -->
      <q-input
        v-model="searchBox"
        label="Filter"
      ></q-input>
      
      <!-- The button to filter where node status = 1 -->
      <q-button @click="onClickStatus(1)">
        Status 1
      </q-button>
      
      <!-- The tree -->
      <q-tree
        ref="projectTree"
        :filter="filterTrigger"
        :filter-method="customFilterMethod"
       ....
      ></q-tree>
      
      export default {
        data () {
          return {
            searchBox: '',
            filterTrigger: 'true',
            statusFilter: ''
            ....
          }
        },
      
        watch: {
          // Whenever the searchBox property changes, 
          // use it to trigger the tree filter's reactivity
          // by assigning its value to the 
          // filterTrigger property. 
          // Actually, the value we assign here is irrelevant.
          searchBox: function (newVal, oldVal) {
            this.filterTrigger = newVal
          }
        },
      
        methods: {
          onClickStatus (statusId) {
            // This method is more complicated than this in reality,
            // but basically we track which of the 5 status' were clicked
            this.statusFilter = statusId
          },
      
          customFilterMethod (node, filterTrigger) {
            // The filterTrigger param is ignored in here.
      
            // Instead, we use the contents of the search box input ...
            const searchBoxText = this.searchBox.toLowerCase()
      
            const matchedNodeLabel = (node.label && node.label.toLowerCase().indexOf(searchBoxText) > -1)
      
            // And any status button that was clicked ....
            let matchedStatus = true
      
            if (this.statusFilter !== '') {
              // if the node status is in the list of filters, match it
              // Very simplified example code:
              matchedStatus = (this.statusFilter.indexOf(node.status) > -1)
            }
      
            // In our context we always AND the filters
            return (matchedNodeLabel && matchedStatus)
          }
        }
      }
      

      Now, if there is something typed into the search box, or if a status button is clicked, either or both of those values will be used to filter the tree nodes. Yay! 🙂

      posted in Framework
      M
      murrah
    • RE: [Solved] How to get a table to scroll its rows within a tab panel?

      @metalsadman
      Wow! That’s awesome. Thank you. 🙂
      I already had the sticky header but left it out of my example to keep it simple. I thought the issue of the sizing was with flex but clearly I was wasting time trying to make that happen! Much appreciated.
      Go well,
      Murray

      posted in Help
      M
      murrah

    Latest posts made by murrah

    • RE: [Solved] How to get a table to scroll its rows within a tab panel?

      @metalsadman
      Wow! That’s awesome. Thank you. 🙂
      I already had the sticky header but left it out of my example to keep it simple. I thought the issue of the sizing was with flex but clearly I was wasting time trying to make that happen! Much appreciated.
      Go well,
      Murray

      posted in Help
      M
      murrah
    • [Solved] How to get a table to scroll its rows within a tab panel?

      Hi.
      I have a q-table inside a q-tab-panel. It is not a virtual scroll - there will only ever be < 100 rows. I am paginating by 10 rows. When the tab panel is too short to show all 10 rows I would like to keep the pagination footer sticky to the bottom of the tab panel and the rows to scroll (vertically). In other words the tab panel height is the maximum table height with scrolling when it wont fit.

      Here is my code pen

      If you set the fixed height on the table wrapper div you can see the effect I am trying to achieve but of course the table should flex to the tab panel size. And, if there are only 1 or 2 rows (for example) the table remains at the full height of the wrapper div with the pagination footer sticky to the bottom of that div. That is what I want.

      Without a fixed height the 10 table rows makes the table higher than tab panel. I cant find a flex way to achieve this.

      My question is: How to use flex so the the table will always grow/shrink with the tab panel resize and the pagination footer will stick to the bottom of the tab panel?

      The Text Tab is just to show that the tab setup is flexing properly for simple text scrolling.

      Thanks,
      Murray

      posted in Help
      M
      murrah
    • RE: QTable Height and Scroll?

      @kerbo This works:
      https://forum.quasar-framework.org/topic/5284/q-table-height-virtual-scroll-and-sticky-headers/2
      🙂

      posted in Help
      M
      murrah
    • RE: [Solved] Quasar way to align a q-btn to the middle of a div in a template?

      Yay!! That’s better!. Thank you. Very much appreciated. 🙂

      posted in Help
      M
      murrah
    • RE: [Solved] Quasar way to align a q-btn to the middle of a div in a template?

      Thanks for your replies. They all work in straight divs but when in a table v-slot:bottom template they dont’!

      Codepen: https://codepen.io/flowt-au/pen/OJRpmWw?editors=1010

      The first 3 are within the table and the last 3 that are centered are outside the table.

      Weird.

      posted in Help
      M
      murrah
    • [Solved] Quasar way to align a q-btn to the middle of a div in a template?

      I have a q-table with a <template v-slot:bottom> into which I would like to center a button. I have tried all sorts of combinations of alignment but cannot get it to work.
      eg:

      <q-table
        etc >
        <template v-slot:bottom>
          <div class="relative-position">
            <q-btn
              class="center"
              round
              icon="add"
              @click="addMyThing"/>
          </div>
        </template>
      </q-table>
      

      How to do that?
      Thanks again,
      Murray

      posted in Help
      M
      murrah
    • RE: Scroll Area with toolbar above changes scroll-area scroll height

      Thanks so much for your help - that’s much better. Sorry for the slow reply - for some reason I missed the notification. 😞

      posted in Help
      M
      murrah
    • RE: Material icons outline shows icon name, not icon

      Oh… of course. I had done this:
      extras: [
      ‘material-icons’
      ]

      not realising I actually needed to add to that, eg:
      ‘material-icons’,
      ‘material-icons-outlined’,
      ‘material-icons-round’,
      ‘material-icons-sharp’

      Thanks again!
      Murray

      posted in Help
      M
      murrah
    • Material icons outline shows icon name, not icon

      I am using the out-of-the-box Material icons and when I ask for the outlined version I get the icon name as text instead of the icon.

      Here is a screenshot from the Basic Example in CodePen:
      Greenshot 2020-11-10 10_35_56.png

      From the docs: eg material-icons-outlined: o_thumb_up

      How do I do that?
      Thanks,
      Murray

      posted in Help
      M
      murrah
    • RE: Auto generate a build number in SPA

      @beets Thanks for that. Sorry for the slow reply, I missed your post. 🙂

      posted in Help
      M
      murrah