Styling
Appearance of the form collection elements can be altered through CSS variables.
CSS Variables
<onlinq-collection>
--collection-display: block;
--collection-justify-content: flex-start;
--collection-align-items: flex-start;
--collection-contents-margin: 0 0 1rem;
--collection-contents-flex-grow: 1;
--collection-actions-margin: 0 0 1rem;
--collection-actions-flex-grow: 0;
<onlinq-collection-entry>
--collection-entry-display: block;
--collection-entry-justify-content: flex-start;
--collection-entry-align-items: flex-start;
--collection-entry-contents-margin: 0 0 1rem;
--collection-entry-contents-flex-grow: 1;
--collection-entry-actions-margin: 0 0 1rem;
--collection-entry-actions-flex-grow: 0;
Stylesheets
Included in the package for this library are some predefined stylesheets for
specific use cases. Make sure to import the @onlinq/form-collection/dist/onlinq-collection.css
file in your CSS to use these configurations.
Inline entry action buttons
To display action buttons for collection entries next to the entry rather than
below it, add the collection-inline
class to the <onlinq-collection>
element.