Label for Fields – placement

  • Resolved kkeach

    (@kkeach)


    1 year, 4 months ago

    On this page it mentions adding a label if you want more than the field value to show, which is great https://docs.acfviews.com/guides/acf-views/basic/field-labels . However, the output using the View shortcode is stacking the label and the field vs it being Label: Field Value.

    It looks like this, which is really hard to read. Is there a way to have the label and value on the same row?

    Price:
    110k
    Location:
    Erwin, TN
    Land:
    1 acre
    Bed/Bath:
    2/1
    Size:
    800

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author WPLake

    (@wplakeorg)

    Hi @kkeach

    Thanks for choosing ACF Views!
    To display the label and the field value on the same line you could use CSS.
    Try adding the following style rule in the ‘Advanced->CSS Code’ field;

    display: flex;
    Thread Starter kkeach

    (@kkeach)

    That didn’t work. I see it in the CSS Preview box but after purging the cache, it still looks the same. Any other ideas?

    Thread Starter kkeach

    (@kkeach)

    div, span {
  display: inline-block;
}

    This put it all on one line but it looks like this and the elements like title, header menu etc are also shifted. ??

    Price:110kLocation:Erwin, TNLand:1 acreBed/Bath:2/1Size:800

    • This reply was modified 1 year, 4 months ago by kkeach.
    Plugin Author WPLake

    (@wplakeorg)

    Hi @kkeach

    I’m sorry that I was perhaps not so clear with my explanation.

    When you create an ACF View and you’ve got your fields assigned, these fields are wrapped in classes, for example “acf-view__row”, “acf-view__field” and so forth. It’s the “acf-view__row” which is important in your case.

    Try replacing it with the below CSS.

    #view__row {
display: flex;
}

    If that doesn’t work, could you provide a link to the page where you have your ACF View?

    At the moment, you’ve defined a style for “div, span” which would apply to other elements on the same page as the View, which yields unexpected results, as you’ve mentioned.

    Thread Starter kkeach

    (@kkeach)

    That worked! Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Label for Fields – placement’ is closed to new replies.

Tags