How do I get a Slate to take the full screen space?

[VincentF]

I have a Slate and I want to display it in full screen in a Workshop app, via the iframe widget.

I want to make my Slate responsive.

How can I make slate to take the “full space” it can take ?

[VincentF]

You will need a few pieces, in Slate, namely:

• One parent container that will hold all the rest of the Slate
• The child if any in the container

Then, you need to:

1. Drop the below CSS content in the CSS configuration of your Slate instance

// Utility Classes
// ===============

.u-posFullScreen {
	position : absolute !important;
	top      : 0 !important;
	bottom   : 0 !important;
	left     : 0 !important;
	right    : 0 !important;
}

.u-fluidSize {
	height : auto !important;
	width  : auto !important;
}

// 
// Expand the Slate document canvas to take up
// the full screen.
// 
sl-app-canvas .canvas-body {
	
	// Position
	.u-posFullScreen();
	
	// Box Model
	.u-fluidSize();
	
	// Miscellaneous
	overflow : hidden !important;
}

// 
// Expand the app container to take up the
// full screen.
// 
#widget-w_container {
	
	// Position
	.u-posFullScreen();
	
	// Box Model
	.u-fluidSize();
}

2. Make sure the name of the parent container matches what is in the CSS configuration

3. Make the parent container widget a “flex” type

4. From there you can configure the child widget(s) with their position, flex-size (grow)

Note: You can create a slate with the starting template called “Full Width” when you create a Slate application to have more information.