Extra blank space in the bottom component



  • Hey, guys

    My component is automatically put extra blank space in footer of the page

    like this -> https://drive.google.com/open?id=0B9OhC-v8a_Lwb3hWT0U0NXZFTVU

    why this is happening ?

    sorry for my english.



  • Hi, can you reproduce the code ?
    I use

     <q-fixed-position corner="top-right" :offset="[18, 18]">
        <q-btn round color="primary" @click="alert" icon="alarm" />
      </q-fixed-position>
    

    to achieve what you did and :offset mean the ‘space’ (padding/margin) i want.
    Waiting your code =)



  • Hi, my problem is not with floating action button, because i made tests removing.

    I put the element in main component, and ever have very large blank space between the end of the page and the last component inserted, like the image

    my template

    <q-layout ref="layout" :view="layoutStore.view" :left-breakpoint="layoutStore.leftBreakpoint" :right-breakpoint="layoutStore.rightBreakpoint" :reveal="layoutStore.reveal">
      <q-toolbar slot="header">
        <q-btn flat @click="$refs.layout.toggleLeft()">
          <q-icon name="menu" />
        </q-btn>
        <q-toolbar-title>
          Áreas e Setores
          <span slot="subtitle">Adicione e edite áreas e setores</span>
        </q-toolbar-title>
        <q-btn flat>
          <q-icon name="more_vert" />
          <q-popover ref="popover1">
            <q-list link separator class="scroll" style="min-width: 100px">
              <q-item @click="showFields(), $refs.popover1.close()">
                <q-item-main label="Áreas" sublabel="" />
              </q-item>
              <q-item @click="showDepartaments(), $refs.popover1.close()">
                <q-item-main label="Setores" sublabel="" />
              </q-item>
            </q-list>
          </q-popover>
        </q-btn>
    
      </q-toolbar>
    
      <div slot="left">
        <side-menu></side-menu>
      </div>
      <table-departaments v-if="layoutDepartaments"></table-departaments>
      <table-fields v-if="layoutFields"></table-fields>
      <q-fixed-position corner="bottom-right" :offset="[18, 18]">
        <q-fab color="primary" icon="add" direction="up">
          <q-fab-action color="primary" @click="handlerAddArea()" icon="business" >
            <q-tooltip anchor="center left" self="center left" :offset="[10, 10]" class="desktop-only">
              <strong>Adicione uma Área</strong>
            </q-tooltip>
          </q-fab-action>
          <q-fab-action color="secondary" @click="handlerAddDepartament()" icon="account_balance" >
            <q-tooltip anchor="center left" self="center left" :offset="[10, 10]" class="desktop-only">
              <strong>Adicione um Setor</strong>
            </q-tooltip>
          </q-fab-action>
        </q-fab>
      </q-fixed-position>
      <add-departament-modal ref="addDepartamentModal"></add-departament-modal>
      <add-field-modal ref="addFieldModal"></add-field-modal>
    </q-layout>

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.