When pages contain content that expands beyond the viewport, such as wide DataGrids for example, the following behaviour can be observed:
- Wide content placed on a template linked to a wide page will not extend beyond the viewport. Instead, such content will, whenever possible, squeeze together and reduce its width or wrap.
- Wide content placed on the page itself will extend beyond the viewport. Such content will only wrap when it stretches beyond the wide content that causes the page to extend beyond the viewport in the first place
In some situations, this can lead to undesirable outcomes. Some simple CSS can be applied to adjust these behaviours.
To make page content wrap
To make content on the page behave like content on the template, so to make it wrap when it is wider than the viewport, add the following CSS to your stylesheet:
.page-content {
display: block;
}
To make template content stretch
To make content on the template behave like content on pages, so to make it stretch beyond the viewport, add the following CSS to your stylesheet:
.container {
width: fit-content;
}