Setting up a page with top (text) and bottom (list)



  • pff, always thought that html/css positioning would be easier than hardcore coding. ๐Ÿ˜•
    Anyway, I wonder if this is the best way of setting up a responsive mobile page that has:

    1. header-body-footer
    2. body has 2 fixed parts (top 33%, bottom 67%)
    3. top part is just place holder for text
    4. bottom part is a scrolling list

    0_1483288627899_upload-c4912d62-79ca-4213-ba8e-a55d56825d44

    code:

      <q-layout>
        <!--HEADER-->
        <div slot="header" class="toolbar">
          header
        </div>
        <!--BODY-->
        <div class="layout-view no-scroll">
          <!--TOP-->
          <div style="background-color: green; height:33%">
            <p>This is the top part</p>
          </div>
          <!--LIST-->
          <div class="scroll"
               style="background-color: cornflowerblue;
                 height:67%">
            <div class="list scroll">
              <div v-for="item in list" class="item">
                <div class="item-content">{{item}}</div>
              </div>
            </div>
          </div>
        </div>
        <!--FOOTER-->
        <div slot="footer" class="toolbar">footer</div>
      </q-layout>
    </template>
    


  • Imagining an app with that layout, I would think when typing something, the scrolling section would be pretty much hidden. It should be doable though.

    Sorry to also side track your post a bit, but I was also wondering from a higher level perspective about whether or not it would be correct with Quasar to build a responsive website or to actually redirect (load a different version) of the website for mobile devices. Being Quasar is optimized for mobile, I would have thought it would be the latter.

    @rstoenescu - could you give us some advice on that? What is your best experiences? What is Quasar best suited to do? responsive, dedicated or maybe even adaptive/ progressive enhanced?

    @Martin - I am also asking this, because Iโ€™m thinking the answer might also help you with the pain you are having right now. ๐Ÿ˜„

    Scott


  • Admin

    Hi,

    Question: does the top part changes?

    Some assumption first: you only want the item list to be scrollable and the rest of the UI to always be visible on screen.
    If โ€œnoโ€ then add it as part of the layout header (div slot="header").
    If โ€œyesโ€ then it requires some thinking. You still need to add it to the header, but you also need to either use Vuex or a simple store of your own to sync what the layout should show based on the page the user is on.

    This is just the high level design based on Vueโ€™s own capabilities. Tell me if you need further information.