Flex vertical layout


Topic: Flex vertical layout

Pratley asked 6 years ago

Hi

I have been very impressed with MDB bootstap so far - been using it about a week. However i have a problem.

In the example templates there is one called signup-page.html and it has css code as follows.

html,
body,
header,
.view {
  height: 100%;
}

@media (min-width: 851px) and (max-width: 1440px) {
  html,
  body,
  header,
  .view {
    height: 850px;
  }
}

@media (min-width: 800px) and (max-width: 850px) {
  html,
  body,
  header,
  .view {
    height: 1000px;
  }
}

@media (min-width: 451px) and (max-width: 740px) {
  html,
  body,
  header,
  .view {
    height: 1200px;
  }
}

@media (max-width: 450px) {
  html,
  body,
  header,
  .view {
    height: 1400px;
  }
}

This seems to set the height to a specific height based on the device width - i can see that this then helps with vertically aligning the main bootstrap "card".

The problem is i am wanting to do something similar on a dynamic page that i don't know the height of - depending on the text generated on the page it could vary quite a lots.

The page in question is

https://app.scorecardmarketing.com/_materialmockup/report.html

If you view on mobile you should see the problem. can anyone advise how i can make this card vertically aligned to the center of the screen on desktop yet appear properly on mobile?

thanks Stephen


Bartłomiej Malanowski staff pro premium commented 6 years ago

What's the current behavior? I can't see any issues, but maybe I'm blind :) Can you point me how can I recreate this issue?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: Desktop/mobile
  • Browser: chrome
  • OS: window 10
  • Provided sample code: No
  • Provided link: Yes