• 0
Sign in to follow this  
Followers 0

DMS 2 Columns 100% Height of parent Canvas


Question

Posted · Report post

Hi

 

I've tried all sorts of things to get x2 columns within a DMS2 Canvas area to fill 100% of the Canvas area height. Is there a known workaround to ensure that columns are at least 100% of their parent container within DMS?

 

Thanks

 

Glennyboy

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

Hi

 

If anyone is interested on how to achieve fluid full height columns in DMS Canvas then this is my gift to you. After hours of different methods I finally achieved this using 'Flexbox Display' and it works cross browser (IE tested to 10):-

// Flex Mixin

// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-moz-@{display}";
	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
	display: ~"-ms-@{display}"; // IE11
	display: @display;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
     -moz-flex: @columns;
      -ms-flex: @columns;
          flex: @columns;
}

/* Full Height Responsive Columns */
.main-row { // Canvas Row
	.grid-row {
	   .flex-display(flex);
	   // rcol and lcol are the nested columns
		.rcol {
			.flex(1 auto);
		}
		.lcol {
			.flex(1 auto);
		}
	}
}
// Go back to Default Responsive
@media (max-width: @resPortraitTablet) {
	.main-row {
		.grid-row {
		.flex-flow(column wrap);
		//display: block;  // fallback
		}
	}
}

Hope others find this useful.

 

Cheers

Glennyboy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi @Aires 

That info is for full width sections not full height columns within a parent Canvas.

Anyone else?

Glennyboy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

glennyboy - Can you provide a link to the page in question, so I can see what you mean.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for sharing.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0