Messed-up button positions since last Quasar update (Solved)

mboeni

Hi there

Is it just me or are the positions of buttons in toolbars messed up since the last update? It must have been one of the updates from today.

My buttons have all moved down a few pixels for some unknown reason after I applied the update.

Can anyone confirm this?

Cheers,
Michael

mboeni

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

metalsadman

@mboeni just updated my quasar to latest, having none of what’s happening in your app. check if you have override css of your q-btns.

mboeni

@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:
app_1.5.7.png

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

It’s the same codebase / revision.

Any ideas?

mboeni

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.

mboeni

This might be interesting:

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

mboeni

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>

Allan-EN-GB

The change comes in from a new class under q-btn and before q-btn__content called q-btn__wrapper. If you’re overriding styles, any height / padding / margins etc will be broken.

Have you made any CSS changes affecting buttons yourself?

mboeni

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

mfecteau

I got all my q-btn messed up since the last update (1.5.8). The only fix I found is to add a style attribute to each button like so

<q-btn style="height:auto;" />.

Annoying.

mboeni

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

metalsadman

for peeps who want to test, see https://github.com/quasarframework/quasar/issues/5843#issuecomment-564540370

mboeni

Fixed with 1.5.9

FlxEd

Hello, I had the same problem and it got only partially fixed for me in 1.5.9.
Three of my buttons were affected. And after upgrade to 1.5.9 one has found its original place.
But two are still messing up as you can see here. Maybe because they are both inside a classic vue transition component ? Or maybe set as fixed-bottom ?

Here is before upgrade from 1.0.0 to 1.5.9

Here is after upgrade from 1.0.0 to 1.5.9

Here is code of the buttons.

Thanks for your help !:)

J J

This post is deleted!

J J

This post is deleted!

J J

Updating Quasar from 1.9.1 to 1.13.1 brings the same alignment issue.
Issue: Earlier div tags were present which are replaced by span tags within the <q-btn-toggle />
PS: No explicit styling applied
@metalsadman

No More Posting New Topics!

Messed-up button positions since last Quasar update (Solved)