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;
Set the repeat parameter as you like.
#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;
}
Thank you for the help
This helps a lot and gives me a few different routes to fix the issue.