Lime Web Component Placement & Layout

Web Components configured under the Web Components section of a Card view in Lime Admin will be rendered in a grid at the top of the overview tab of the specified object card.

How does the grid layout work

This area is a responsive CSS grid. The grid automatically determines the number of columns, based on the total width available. Each column can never be narrower than 18.75rem (300px).

When resizing the viewport, as soon as the space is not enough for each column to be at least 18.75rem wide, the grid's logic kicks in and reduces the number of columns, and redistributes the available space equally between the columns. This can result in moving some components down to the next row within the grid.

Conversely, if there's enough space to fit another column, a new column will be added, the existing columns adjusted, and the components moved to make use of the new layout.

How to force a component to take more columns or rows

By default, each component in this grid will occupy one grid cell, which means it will be rendered in one column and one row.

But the good news is that you can force any component to span more columns or rows. You can do this either via CSS, or via configuration in Lime Admin.

1. The CSS way

Styling that should apply to all instances of the component, in all solutions using the add-on, is done in CSS.

All you need to do is to specify how many rows or columns the component is allowed to occupy within the grid, using grid-column and grid-row, like the example below. Note that this should be specified for the :host!

:host {
    grid-column: span 3; /* Makes the component 3 columns wide */
    grid-row: span 2; /* Makes the component 2 rows tall */
}

2. The Lime Admin way

Styling that should only apply to a specific instance is done in Lime Admin.

Whether you have multiple copies of the same component in the same view, a single copy in each of several different views, or use the same component in many different solutions, you can apply different styling to each via Lime Admin.

In Lime Admin, on the Card View configuration page, under the section Web components, find (or add) your component. Then go to the code editor box for Properties and write the grid rules like in the example below:

{
    "style": {
        "grid-column": "span 3",
        "grid-row": "span 2"
    }
}

Spanning all the way

It is possible to make a component span all available columns in any screen width, by writing 1/-1. Whether there is just one column or five, this will span them all.

:host {
    grid-column: 1/-1; /* Makes the component span all available columns */
}

Other grid layout possibilities

Because web components in this slot are grid items, you can do many fancy things with them, using the power of CSS grid. For example changing the span rules based on screen width using media queries, or making a component always be on the second column using grid-column-start: 2;.

We recommend that you read more about CSS grid, to take full advantage of its possibilities. MDN's documentation is a good place to start.