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

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

    Help
    6
    17
    919
    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.
    • mboeni
      mboeni last edited by 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

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

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

        btn-bug.jpg

        metalsadman 1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman @mboeni last edited by

          @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 1 Reply Last reply Reply Quote 0
          • mboeni
            mboeni @metalsadman last edited by

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

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

              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.

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

                This might be interesting:

                3fa5b3cb-8138-4dbe-b9d2-30a9d125cb95-image.png

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

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

                  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>
                  
                  1 Reply Last reply Reply Quote 0
                  • Allan-EN-GB
                    Allan-EN-GB Admin last edited by 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 1 Reply Last reply Reply Quote 0
                    • mboeni
                      mboeni @Allan-EN-GB last edited by

                      @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>
                      
                      
                      1 Reply Last reply Reply Quote 0
                      • M
                        mfecteau last edited by 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 1 Reply Last reply Reply Quote 0
                        • mboeni
                          mboeni @mfecteau last edited by

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

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

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

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

                              Fixed with 1.5.9

                              1 Reply Last reply Reply Quote 0
                              • F
                                FlxEd last edited by 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
                                Right.png

                                Here is after upgrade from 1.0.0 to 1.5.9
                                Wrong.png

                                Here is code of the buttons.
                                Code.png

                                Thanks for your help !:)

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

                                  This post is deleted!
                                  J 1 Reply Last reply Reply Quote 0
                                  • J
                                    J J @J J last edited by

                                    This post is deleted!
                                    1 Reply Last reply Reply Quote 0
                                    • J
                                      J J last edited by

                                      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

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