Change spacing of Fields w/CSS

What is the best way to change the spacing of items in a fields component?

I have a list that has 5 small items but due to the way glide handles the spacing i have two rows regardless of how wide the screen is. Is there a way to force a single row for a single fields component?

One way to do it is by feeding some joined lists into a Java Script column and making your own custom fields component.

On a one row table add two joined lists, the first joined list will target your headings and the second joined list will target your values. Add a javascript column and replace p1 with the joined list headings and replace p2 with joined list values.

(If the list is only 5 items that will never change then you could just type them out with commas)

Add a rich text component to your screen with the Java Script as it’s source.

function generateList(headingsCsv, valuesCsv) {
    const headings = headingsCsv.split(',');
    const values = valuesCsv.split(',');

    if (headings.length !== values.length) {
        return '<p>Error: Headings and values counts do not match.</p>';

    let html = ''; // Removed <ul> tag

    for (let i = 0; i < headings.length; i++) {
        const heading = headings[i].trim();
        const val = values[i].trim();

        // Modified HTML structure to remove list item and place value on new line without semicolon
        html += `<div style="margin-bottom: 10px; color: gray; font-weight: normal;">${heading}<br><span style="color: white;">${val}</span></div>`;

    return html;

// Example usage:
const headingsCsv = p1; // Assuming p1 contains the CSV string for headings
const valuesCsv = p2;   // Assuming p2 contains the CSV string for values

const resultHtml = generateList(headingsCsv, valuesCsv);
return resultHtml;

1 Like

Or maybe you can use 5 fields component.

1 Like

Set the repeat parameter as you like.

Class name: fullFields

#page-root [data-testid="wire-container-fullFields"] ul {
grid-template-columns: repeat(2, minmax(0px, 1fr));
column-gap: 12px;

#page-root [data-testid="wire-container-fullFields"] ul > li {
flex-direction: row;
justify-content: space-between;
1 Like

Thank you for the help

This helps a lot and gives me a few different routes to fix the issue.