Page Layout Question using Rows

Page Layout Question using Rows

Good Afternoon Intel XDK Team,

I am using XDK 3357, HTML5 + Cordova, and App Designer and App Framework3.   I chose  App Framework3 because I want this app for Android, iPhone, iPad, and Windows 10.  I am trying to create an app that on the first page is using a layout of 4 rows.  The first row will have a height percentage of 20% of the screen, the second row will have a height percentage of 20% of the screen, the third row will have a height percentage of 40% of the screen, and the final/fourth row will have a height percentage of 10%.  These four rows add up to 90% of the screen and therefore the 3 buttons and 1 image are spread across the page no matter which device is selected (phone or tablet).  Unfortunately, this approach is not working as I thought it would because as shown from the attached screen shots from the emulator there is more than 10% empty space on the bottom of the screen especially noticeable on the iPhone 6Plus and iPad.  The LESS preview code is shown is below.  Please help and let me know where I am going wrong or a better approach.  Thank you for your help in advance.

@media all and ( min-width : 0px ) {
#afui {
  .row-height-1 > .col > .content-area {  min-height:20%;
    max-height:20%;
  }

@media all and ( min-width : 0px ) {
#afui {
  .row-height-2 > .col > .content-area {  min-height:20%;
    max-height:20%;
  }

  @media all and ( min-width : 0px ) {
#afui {
  .row-height-3 > .col > .content-area {  min-height:40%;
    max-height:40%;
  }

@media all and ( min-width : 0px ) {
#afui {
  .row-height-4 > .col > .content-area {  min-height:10%;
    max-height:10%;
  }
  
  

4 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Hi Ron,

Take a look to Rest of space usage, it may helps you to improve the rows distribution:

https://software.intel.com/en-us/xdk/articles/app-designer-absolute-posi...

If you didn't read it yet, this is a good document about layout.

https://software.intel.com/en-us/xdk/articles/app-designer-layout-controls

Regards

Diego

Instead of %, which are very context sensitive, I would recommend using the vh unit.

min-height: 10vh;

 

vh means "viewport height". It is a percentage of the height of the viewport.  Whereas % is percentage of the height of the _parent_, and most parents are sized to the height of their _content_, so % can be super confusing.

 

 

Good Evening Diego and Chris,

Thank you both for the quick and fantastic responses.  I needed both of your help and suggestions.  I now a using for each row the vh unit with a check mark in "rest of space" field.  This layout looks perfect for all devices in both the portrait and landscape mode (Thank you, Thank you, Thank you!!!).  I am now also using the vw (viewport width) for my max-width of the buttons to make them more accurate in respect to the browser size.  Have a wonderful evening.  

Leave a Comment

Please sign in to add a comment. Not a member? Join today