Fields in the same line

Hi @daliasued

Thank you for the kind words and for choosing ACF Views!

To display the field on the same line as the label, you could add some CSS.

/* display view id 865 field values on 1 line */
.acf-view.acf-view--id--865.acf-view--object-id--730 .acf-view__row {
    display: flex;
}

/* prepend 3 px padding before field */
.acf-view.acf-view--id--865.acf-view--object-id--730 .acf-view__field {
    padding-left: 3px;
}

For multiple values on the same line, also solved by using CSS.
I’ve used the Checkbox field type for my example below. You’ll see that this will add a “,” comma and some padding after each value, excluding the last.

/* display all checkbox values on 1 line */
.acf-view__choice:not(:last-child)::after {
    content: ",";
    padding-right: 3px;
}

Hi @daliasued

My apologies I have added the page id (object-id) in the declaration of the class by mistake. In my CSS I am restricting the style to the ACF View with ID 865 (Your View).

Please use the following instead, pasted into the CSS code on the Advanced tab;

/* display view id 865 field values on 1 line */
.acf-view.acf-view--id--865 .acf-view__row {
    display: flex;
}

/* prepend 3 px padding before field */
.acf-view.acf-view--id--865 .acf-view__field {
    padding-left: 3px;
}

Regarding the multiple values on a single line, you need to also paste the CSS code below to the CSS code in the Advanced tab

/* display all checkbox values on 1 line */
.acf-view__choice:not(:last-child)::after {
    content: ",";
    padding-right: 3px;
}

The style above will only work if your ACF field “Títulos” is the Checkbox field type.

Hi @daliasued

That’s good news!
Let’s go through the steps to make sure we didn’t skip something, and see if we can resolve your other dilemma.

So, have you;
a. Created an ACF Checkbox field?
b. Did you assign the Field in your View?
c. That the ‘CSS code’ below is pasted in the CSS code field of the View. (Not in the field options, it’s located all the way at the top of your View edit screen inside the “Advanced” tab)
d. Select or Fill the field on the page where you located the ACF Checkbox?

/* display all checkbox values on 1 line */
.acf-view__choice:not(:last-child)::after {
    content: ",";
    padding-right: 3px;
}

/*  Uncomment this when it should apply globally
.acf-view__row {
    display: flex;
}
*/