# Change spacing of Fields w/CSS

**URL:** <https://community.glideapps.com/t/change-spacing-of-fields-w-css/74663>\
**Category:** Ask for Help\
**Created:** [July 6, 2024, 4:55pm UTC](https://community.glideapps.com/t/change-spacing-of-fields-w-css/74663 "2024-07-06T16:55:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 6, 2024, 4:55pm UTC](https://community.glideapps.com/t/change-spacing-of-fields-w-css/74663/1 "2024-07-06T16:55:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [July 6, 2024, 5:55pm UTC](https://community.glideapps.com/t/change-spacing-of-fields-w-css/74663/2 "2024-07-06T17:55:30Z")

</div>

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.

 ![Screenshot 2024-07-06 at 10.55.04 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/2/323caf700f987aaeac70b2614fd697a2dfb27d14.jpeg)

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 6, 2024, 11:18pm UTC](https://community.glideapps.com/t/change-spacing-of-fields-w-css/74663/3 "2024-07-06T23:18:58Z")

</div>

Or maybe you can use 5 fields component.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d9504f74eaf8d2ddf69eebbfcbd9b1ea23b96ed3.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 7, 2024, 1:50am UTC](https://community.glideapps.com/t/change-spacing-of-fields-w-css/74663/4 "2024-07-07T01:50:37Z")

</div>

Set the repeat parameter as you like.

 ![Screenshot 2024-07-07 at 08.48.42](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/8/58dc107086705249f7092f38b026df4fb3387a23.png)  
Class name: **fullFields**

```auto
#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;
}

```

---

<div class="post-metadata">

**Author:** ![Nathan\_Stephens](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathan_stephens/32/63262_2.png) [@Nathan\_Stephens](https://community.glideapps.com/u/Nathan_Stephens)\
**Post date:** [July 10, 2024, 7:57pm UTC](https://community.glideapps.com/t/change-spacing-of-fields-w-css/74663/5 "2024-07-10T19:57:09Z")

</div>

Thank you for the help

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