DriveWorks Pro 22

How To: Ensure A DriveWorks Live Form is responsive when rendered in a CSS grid

How To: Ensure A DriveWorks Live Form is responsive when rendered in a CSS grid

When rendering a DriveWorks Form through the Integration Theme inside a CSS grid, carefully consider the styling applied to the Form container element to ensure that it is fully responsive.

If the Form container element is a "grid child", where it's direct parent has the style display: grid, then it may expand freely but not shrink when DWFormContainerWidth is used in your rules.

Before

After

The following solutions will ensure that a Form can both expand and collapse as expected.

If not, the Form may grow freely when the available area is resized larger, for example the browser window, however it will not shrink as it becomes smaller.

Solution A

Ensure the display: grid parent element has columns that specify a minmax() value.

.grid {
  display: grid;

  /* Fix: minimum column width of 0 */
  grid-template-columns: minmax(0, 1fr);
}

Solution B

Apply min-width: 0; to the grid child element.

.grid {
  display: grid;
}

.my-form-container-element {
  grid-area: 1 / 1;

  /* Fix: minimum width of 0 */
  min-width: 0;
}

For more information, see: https://css-tricks.com/preventing-a-grid-blowout