Question 295297 in Html Question posted in
Some basic documentation can be found here.

Html – How to make css component responsive when adding content inside q-card

I am using vue and quasar and have this component:

<template>
  <q-layout>
    <q-page-container style="background-color: #e0e5ea;">
      <q-page class="column">
        <menu-bar></menu-bar>
        <div class="q-ma-lg row col">
            <q-card flat class="col" style="border-radius: 9px;">
              <q-card-section>
              </q-card-section>
            </q-card>
          <q-card flat class="col q-ml-lg " style="border-radius: 9px">
            <q-card-section>
            </q-card-section>
          </q-card>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

Without content in <q-card-section>, <q-card> occupy all available height and is responsive during zoom in and zoom out (100% height used), but when I add content into <q-card-section> i.e. 5 <user-account> components, then q-card increase size and whole page is scrollable, I know I can precedent it with overflow auto and specific height, but then page is not responsive.
Is it possible to have same behaviour like without content, but have scrollable q-card when there is more elements?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally I found solution, the best way to do this is to add both 'row' and 'col' to the child element class, then it occupy whole space and is responsive, then we should add q-scrollarea.


  2. 0

    You can use min-height for manage height when not have any content see below example.

    .content-wrap{
  width:40%;
  margin:5px;
  float:left;
  min-height:50vh;
  overflow:auto;
  max-height:50vh;
  background:#eee;
  padding:10px;
  box-sizing:border-box;
  border-radius:6px;
}
.center-content{
display:flex;
align-items:center;
justify-content:center;}
    <div class="content-wrap">
  <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div> <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div> <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div> <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div> <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div> <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div> <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div> <div class="item">
     Scrolled Item...        
  </div>
   <div class="item">
     Scrolled Item...        
  </div> <div class="item">
     Scrolled Item...        
  </div>
</div>
<div class="content-wrap center-content">
<p>No items in this box.
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search