Fixed with 1.5.9

@Uneasy I think this might be related to the issue I had on Electron:

https://forum.quasar-framework.org/topic/4883/messed-up-button-positions-since-last-quasar-update/12

Also, you might want to try their fix:

https://github.com/quasarframework/quasar/issues/5843

Cheers,
Michael

@mfecteau They’re working on a fix. I just tested it and it worked for my app. If others confirm the fix, it will probably make it into an update very soon…

Hi there

I would like to have a a setup where I use a splitter and have the q-tabs on the left (v-slot:before) and the content on the right (v-slot:after). Clicking on the tab should load a page and display it in the appropriate place to the right (<router-view/>).

Issue: The whole page is replaced, not just the right side of the splitter. How do I make sure routing to a page does not overwrite the whole page?

Here’s the code:

<template>
  <q-page class="flex flex-start bg-secondary">
    <div style="width:100%">
      <q-splitter
        :value="160"
        disable
        unit="px"
      >
        <template v-slot:before>
          <q-tabs
            v-model="selectedTab"
            vertical
            dense
            inline-label
            >
            <div class="q-pa-sm" >
              <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-uppercase" :style="{ color: localTextColor1 }" >DEV TOOLS</q-item-label>
            </div>
            <q-route-tab
              name="iveDebug"
              icon="account_box"
              label="IVE Debugging"
              style="justify-content:initial"
              :style="{ color: localTextColor2 }"
              to="/ivedebug"
              exact
            />
          </q-tabs>
        </template>
        <template v-slot:after>
          <q-page-container>
            <router-view/>
          </q-page-container>
        </template>
      </q-splitter>
    </div>
  </q-page>
</template>

Here’s the routing I’m doing:

  {
    path: '/ivedebug',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IveDebug.vue') }
    ]
  }

Cheers,
m.

@Allan-EN-GB nope, I don’t use custom css stuff on q-btn.

Here’s actually the full source of the page that’s messed up, so you see what I’m trying to do:

<template>
<q-page class="bg-secondary">
  <div class='q-pa-md flex'>
    <q-layout view='hHh Lpr lff' container style='height: 570px' class='shadow-2 rounded-borders'>
      <q-header class='bg-primary'>
        <q-toolbar>
          <div v-if='drawerLeft === true'>
            <q-btn flat @click=toggleLeftDrawer() round dense icon='chevron_left' :style="{ color: localTextColor1 }" />
          </div>
          <div v-else>
            <q-btn flat @click=toggleLeftDrawer() round dense icon='chevron_right' :style="{ color: localTextColor1  }" />
          </div>

          <q-space/>
          <div v-if="uiEnableDeveloperMode">
            <div v-if='drawerRight === true'>
              <q-btn flat @click=toggleRightDrawer() round dense icon='chevron_right' :style="{ color: localTextColor1  }" />
            </div>
            <div v-else>
              <q-btn flat @click=toggleRightDrawer() round dense icon='chevron_left' :style="{ color: localTextColor1  }" />
            </div>
          </div>
        </q-toolbar>
      </q-header>

      <q-drawer
        v-model='drawerLeft'
        show-if-above
        bordered
        content-class='bg-secondary'
        :width='200'
        :breakpoint='700'
      >
          <div>
            <q-spinner-rings color='green' size='lg' class='moodIndicatorPosition' />
          </div>
          <div class='q-pa-sm q-gutter-md'>
            <img alt='Lena' src='~assets/lena_avatar.png' style='width:160px' >
          </div>
      </q-drawer>

      <div v-if="uiEnableDeveloperMode">
        <q-drawer
          side='right'
          v-model='drawerRight'
          show-if-above
          bordered
          content-class='bg-secondary'
          :width='200'
          :breakpoint='600'
        >
            <div class='q-pa-sm'>
              <div :style="{ color: localTextColor1 }">
                <q-item-label lines='1' class='q-mt-xs text-body2 text-weight-bold text-uppercase' align='center'>DEBUG</q-item-label>
              </div>
              <div class='q-pa-sm' :style="{ color: localTextColor1 }">
                <q-input outlined v-model='feedbackText'
                label='Feedback'
                type='textarea' dense rows='10'
                >
                  <template v-if='feedbackText' v-slot:append>
                    <q-icon name='cancel' @click.stop='feedbackText = null' class='cursor-pointer' />
                  </template>
                </q-input>
              </div>

              <div class='q-pa-xs'>
                <q-btn @click='sendReportButtonBlicked' unelevated class='full-width' text-color='primary' :style="{ background: localTextColor1 }" label='Send Report' size='sm'/>
              </div>

              <div class='q-pa-xs'>
                <q-separator/>
              </div>

              <div class='q-pa-xs'>
                <q-btn @click='hotReloadButtonClicked' unelevated class='full-width' color='negative' label='Hot Reload' size='sm'/>
              </div>

              <div class='q-pa-xs'>
                <q-separator/>
              </div>

              <div class='q-pa-xs'>
                <q-toggle
                  v-model='debugPanelToggle'
                  unelevated
                  class='full-width text-body2'
                  :style="{ color: localTextColor1 }"
                  label='Debug Panel'
                  dense
                  checked-icon='check'
                  unchecked-icon='clear'
                />
              </div>

            </div>
        </q-drawer>
      </div>
      <q-page-container>
        <q-scroll-area
          :thumb-style='thumbStyle'
          :content-style='contentStyle'
          :content-active-style='contentActiveStyle'
          style='height: 464px;'
          ref="chatMessageScrollArea"
        >
             <div class='q-pa-lg row justify-center bg-secondary'>
              <div style='width: 100%; max-width: 600px'>
                <q-chat-message
                  v-for='message in messages' v-bind:key='message.id'
                  :name='message.from'
                  :text='[message.text]'
                  :sent="message.from === 'Michael'"
                  />
              </div>
            </div>
        </q-scroll-area>
            <form ref='chatMessageInputForm' autofocus @submit.prevent='chatMessageButtonClicked' >
              <div class='q-pa-sm q-gutter-sm flex'>

                <div class='col-grow'>
                  <q-input ref='chatMessageInput' dense outlined v-model='chatMessage' label='Message'/>
                </div>

                <q-btn unelevated type='submit'  text-color='primary' :style="{ background: localTextColor1  }" icon='send' size='md' :loading='submittingChatMessage'>
                  <template v-slot:loading>
                    <q-spinner-facebook />
                  </template>
                </q-btn>
              </div>
            </form>
      </q-page-container>
    </q-layout>

    <div class='q-pa-xs'/>
    <template v-if='debugPanelToggle === true'>
      <q-layout view='hHh Lpr lff' container style='height: 570px' class='shadow-2 rounded-borders'>
        <div class='q-pa-md row justify-left'>
          <q-header class='bg-primary'>
            <q-toolbar>
              <q-toolbar-title :style="{ color: localTextColor1  }">
                Debug - KB Feedback Reports
              </q-toolbar-title>
              <q-space/>
              <div>
                <div>
                  <q-btn flat @click=toggleDebugPanel() round dense icon='cancel' :style="{ color: localTextColor1  }" />
                </div>
              </div>
            </q-toolbar>
          </q-header>

          <q-drawer
            v-model='debugDrawerLeft'
            bordered
            :width='200'
            :breakpoint='700'
            content-class='bg-secondary'
          >
            <div class='q-pa-sm' :style="{ color: localTextColor1  }" >
                <q-item-label lines='1' class='q-mt-xs text-body2 text-weight-bold text-uppercase' align='center'>Reports</q-item-label>
            </div>
            <div class='q-pa-xs'>
              <q-scroll-area
                :thumb-style='thumbStyle'
                :content-style='contentStyle'
                :content-active-style='contentActiveStyle'
                style='height: 464px;'
              >
                  <q-list dense bordered separator class='rounded-borders' style='width:175px'>

                    <div v-for="report in debugAIMLReports" :key="report.id">
                      <q-item
                        clickable
                        v-ripple
                        :active='selectedKBReport === report.id'
                        @click='selectedKBReport = report.id'
                        active-class='activeListItem'
                        class=' q-pa-xs bg-primary'
                        :style="{ color: localTextColor1  }"
                      >
                        <q-item-section class='q-pa-xs' top>
                          <q-item-label lines='1'>
                            <span class='text-weight-medium' style='font-size:12px'>KB Report</span>
                            <span style='font-size:12px'> - {{report.user}}</span>
                          </q-item-label>
                          <q-item-label lines='1'>
                            <span :style="{ color: localTextColor2 }" style='font-size:12px'>{{report.date}} [{{report.time}}]</span>
                          </q-item-label>
                        </q-item-section>
                        <q-item-section side>
                          <div class='q-gutter-xs' :style="{ color: localTextColor2 }" >
                            <q-btn @click='function () {selectedKBReport = report.id; deleteReportButtonClicked()}' class='gt-xs' size='12px' flat dense round icon='delete' />
                          </div>
                        </q-item-section>
                      </q-item>
                      <q-separator/>
                    </div>
                  </q-list>
                  <div class="q-pa-xl" />
                </q-scroll-area>
            </div>
          </q-drawer>

          <q-page-container style='width:100%; height:100%'>
            <q-scroll-area
              :thumb-style='thumbStyle'
              :content-style='contentStyle'
              :content-active-style='contentActiveStyle'
              style='height: 485px;'
            >
            <div class='q-pa-md' style='width: 100%'>

          <div v-if="selectedKBReport !== ''">
              <q-list dense style='width:100%'  >
                <q-card class='q-pt-xs bg-primary' :style="{ color: localTextColor1 }" >
                  <q-card-section >
                    <div class='flex'>
                      <div class='text-subtitle2'>KB Report</div>
                      <q-space/>
                      <div class='text-subtitle2'>User: {{getSelectedDebugReport().user}}</div>
                    </div>
                    <div class='text-caption'>{{getSelectedDebugReport().date}} - {{getSelectedDebugReport().time}}</div>
                  </q-card-section>
                  <q-card-section class='bg-secondary'>
                    <div v-for='logEntry in getSelectedDebugReport().log' v-bind:key='logEntry'>
                        {{logEntry}}
                    </div>
                  </q-card-section>
                  <q-card-section class='bg-primary'>
                    <q-separator/>
                    <div class='q-pt-xs'>
                      {{getSelectedDebugReport().comment}}
                    </div>
                  </q-card-section>
                  <q-card-section class='q-pa-xs bg-secondary'>
                    <div class='q-pt-xs' align='right'>
                      <q-btn @click='resolveReportButtonClicked' unelevated color='primary' label='Resolve' size='sm' />
                    </div>
                  </q-card-section>
                </q-card>
              </q-list>
          </div>
            </div>
            </q-scroll-area>
          </q-page-container>
        </div>
      </q-layout>
    </template>
  </div>
</q-page>
</template>

<script>
var util = require('src/nxs/utility')
export default {
  name: 'IveChat',
  data () {
    return {
      drawerLeft: false,
      drawerRight: false,
      debugDrawerLeft: false,
      feedbackText: '',
      chatMessage: '',
      submittingChatMessage: false,
      debugPanelToggle: false,
      selectedKBReport: '',
      localTextColor1: '',
      localTextColor2: '',
      chatMessageScrollAreaPosition: 0,
      uiEnableDeveloperMode: false,
      messages: [
        { id: this.createUUID(), text: 'Message 1', from: 'Michael' },
        { id: this.createUUID(), text: 'Message 2', from: 'Michael' },
        { id: this.createUUID(), text: 'Message 3', from: 'Michael' },
        { id: this.createUUID(), text: 'Message 4', from: 'Lena' },
        { id: this.createUUID(), text: 'Message 5', from: 'Lena' }
      ],
      thumbStyle: { right: '4px', borderRadius: '5px', background: 'white', width: '7px', opacity: 0.7 },
      contentStyle: { background: 'sedondary' }, // used when cursor is NOT over chat area
      contentActiveStyle: { background: 'secondary' }, // used when cursor IS over chat area
      debugAIMLReports: [
        {
          id: this.createUUID(),
          user: 'mboeni',
          date: '27.10.19',
          time: '21:32:15',
          comment: 'I think the useridle should trigger faster.',
          log: [
            '9c37a421-c455-46e8-ae63-77399001a985 setting predicate useridle-count to 0',
            '9c37a421-c455-46e8-ae63-77399001a985 setting predicate repetition-count to 0',
            '9c37a421-c455-46e8-ae63-77399001a985 Pattern : BOTSTART <THAT> UNKOWN <TOPIC> inquiry name',
            '9c37a421-c455-46e8-ae63-77399001a985 Category: BOTSTART <THAT> * <TOPIC> *',
            '9c37a421-c455-46e8-ae63-77399001a985 File : lena_base.aiml',
            '9c37a421-c455-46e8-ae63-77399001a985 Pattern : HELLO <THAT> UNKOWN <TOPIC> inquiry name',
            '9c37a421-c455-46e8-ae63-77399001a985 Category: HELLO <THAT> * <TOPIC> * ',
            '9c37a421-c455-46e8-ae63-77399001a985 File : lena_greeting.aiml',
            '9c37a421-c455-46e8-ae63-77399001a985 Response: Welcome back! It is good to see you.'
          ]
        },
        {
          id: this.createUUID(),
          user: 'drogic',
          date: '28.10.19',
          time: '09:31:11',
          comment: 'Nothing special to report here.',
          log: [
            '9c37a421-c455-46e8-ae63-77399001a985 setting predicate useridle-count to 0',
            '9c37a421-c455-46e8-ae63-77399001a985 setting predicate repetition-count to 0',
            '9c37a421-c455-46e8-ae63-77399001a985 Pattern : SET MOOD <THAT> UNKOWN <TOPIC> inquiry name',
            '9c37a421-c455-46e8-ae63-77399001a985 Category: SET MOOD <THAT> * <TOPIC> *',
            '9c37a421-c455-46e8-ae63-77399001a985 File : lena_base.aiml',
            '9c37a421-c455-46e8-ae63-77399001a985 Pattern : HI <THAT> UNKOWN <TOPIC> inquiry name',
            '9c37a421-c455-46e8-ae63-77399001a985 Category: HI <THAT> * <TOPIC> * ',
            '9c37a421-c455-46e8-ae63-77399001a985 File : lena_greeting.aiml',
            '9c37a421-c455-46e8-ae63-77399001a985 Response: Welcome back! It is good to see you.'
          ]
        }
      ]
    }
  },
  mounted () { // This allows you to do stuff 'on page load'
    this.$refs.chatMessageInput.focus()
    this.$root.$on('developerMode', this.enableDevMode)
    this.$root.$on('onNewChatMessage', this.chatMessageAnimateScroll)
    this.uiEnableDarkMode = this.$q.localStorage.getItem('uiEnableDarkMode')
    if (this.uiEnableDarkMode) {
      this.localTextColor1 = this.$darkTextColor1
      this.localTextColor2 = this.$darkTextColor2
    } else {
      this.localTextColor1 = this.$lightTextColor1
      this.localTextColor2 = this.$lightTextColor2
    }
    if (this.$q.localStorage.getItem('uiEnableDeveloperMode')) {
      this.uiEnableDeveloperMode = true
    } else {
      this.uiEnableDeveloperMode = false
    }
  },
  methods: {
    toggleLeftDrawer: function () {
      this.drawerLeft = !this.drawerLeft
    },
    toggleRightDrawer: function () {
      this.drawerRight = !this.drawerRight
    },
    chatMessageButtonClicked: function () {
      // Do stuff here
      if (this.chatMessage !== '') {
        this.submittingChatMessage = true

        setTimeout(() => {
          // delay simulated, we are done,
          // now restoring submit to its initial state
          this.submittingChatMessage = false
        }, 400)
        this.messages.push({ id: this.createUUID(), text: this.chatMessage, from: 'Michael' })
      }
      this.$root.$emit('onNewChatMessage')
      this.chatMessage = ''
      this.$refs.chatMessageInput.focus()
    },
    sendReportButtonBlicked: function () {
      var newReport = {
        id: this.createUUID(),
        user: 'mboeni',
        date: '28.10.19',
        time: '13:37:10',
        comment: this.feedbackText,
        log: [
          '9c37a421-c455-46e8-ae63-77399001a985 setting predicate useridle-count to 0',
          '9c37a421-c455-46e8-ae63-77399001a985 setting predicate repetition-count to 0',
          '9c37a421-c455-46e8-ae63-77399001a985 Pattern : BOTSTART <THAT> UNKOWN <TOPIC> inquiry name',
          '9c37a421-c455-46e8-ae63-77399001a985 Category: BOTSTART <THAT> * <TOPIC> *',
          '9c37a421-c455-46e8-ae63-77399001a985 File : lena_base.aiml',
          '9c37a421-c455-46e8-ae63-77399001a985 Pattern : HELLO <THAT> UNKOWN <TOPIC> inquiry name',
          '9c37a421-c455-46e8-ae63-77399001a985 Category: HELLO <THAT> * <TOPIC> * ',
          '9c37a421-c455-46e8-ae63-77399001a985 File : lena_greeting.aiml',
          '9c37a421-c455-46e8-ae63-77399001a985 Response: Welcome back! It is good to see you.'
        ]
      }
      this.debugAIMLReports.push(newReport)
      this.feedbackText = ''
    },
    hotReloadButtonClicked: function () {
      // Do stuff here
    },
    toggleDebugPanel: function () {
      this.debugPanelToggle = !this.debugPanelToggle
    },
    setChatScrollPosition: function () {
      // Do stuff here
    },
    resolveReportButtonClicked: function () {
      // Do stuff here
    },
    deleteReportButtonClicked: function () {
      this.debugAIMLReports = this.debugAIMLReports.filter(item => item.id !== this.selectedKBReport)
      this.selectedKBReport = ''
    },
    getSelectedDebugReport: function (id) {
      var report = this.debugAIMLReports.find(({ id }) => id === this.selectedKBReport)
      if (report === undefined) {
        report = {}
      }
      return report
    },
    createUUID: function () {
      return util.createUUIDv4()
    },
    chatMessageAnimateScroll () {
      this.$refs.chatMessageScrollArea.setScrollPosition(this.chatMessageScrollAreaPosition, 300)
      this.chatMessageScrollAreaPosition = Math.floor(Math.random() * 1001) * 20
    },
    enableDevMode: function (devMode) {
      if (devMode) {
        this.uiEnableDeveloperMode = true
      } else {
        this.uiEnableDeveloperMode = false
      }
    }
  },
  watch: {
    messages: function () {
      // react to changes in the messages array
    },
    debugPanelToggle: function () {
      if (this.debugPanelToggle) {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().setBounds({ height: 1270 })
      } else {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().setBounds({ height: 700 })
      }
    }
  }
}
</script>

<style lang='scss'>
.moodIndicatorPosition {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 2;
}
.activeListItem {
  background: $blue-grey-1;
}
</style>

Here’s the corresponding code for reference:

      <q-header class='bg-primary'>
        <q-toolbar>
          <div v-if='drawerLeft === true'>
            <q-btn flat @click=toggleLeftDrawer() round dense icon='chevron_left' :style="{ color: localTextColor1 }" />
          </div>
          <div v-else>
            <q-btn flat @click=toggleLeftDrawer() round dense icon='chevron_right' :style="{ color: localTextColor1  }" />
          </div>

          <q-space/>

          <div v-if='drawerRight === true'>
            <q-btn flat @click=toggleRightDrawer() round dense icon='chevron_right' :style="{ color: localTextColor1  }" />
          </div>
          <div v-else>
            <q-btn flat @click=toggleRightDrawer() round dense icon='chevron_left' :style="{ color: localTextColor1  }" />
          </div>

        </q-toolbar>
      </q-header>

This might be interesting:

Inspecting the app highlights the correct button position (where the ‘chevron’ should be)…perhaps that helps…?

And I have just updated the notebook too. Now the q-btns are shifted down there as well. The only action I took is the quasar upgrade -i. No code changes.

@metalsadman I’ve just grepped thorough all files. There is no override css stuff regarding the q-btns.

Luckily, I have not updated my notebook / only my desktop. Here is the app on the notebook (1.5.7)- This is how it should look:

And here is the app on the desktop system (1.5.8) - This is how it looks on 1.5.8:

It’s the same codebase / revision.

Any ideas?

Addendum: Seems to be in more places than just the toolbar…: