ACF horizontal list not displaying horizontally

  • Resolved amyzavier

    (@amyzavier)


    7 years, 1 month ago

    I am using ACF and used the following code to display a horizontal list.

    I used this code which uses the [li] html shortcode:

    [repeater social_media option=true]
    <ul class=”social-media-links”>[li class=”social-media-links-hover”]<span>[link field=hyperlink][field icon][/link]</span>[/li]
    [/repeater]

    The resulting html below is creating a ul for every iteration along with <p></p>. So the problem here is that the list is not displaying horizonally.

    <ul class=”social-media-links”><li class=”social-media-links-hover”><span><i class=”fa fa-facebook”></i></span>
    <p></p>
    <ul class=”social-media-links”><li class=”social-media-links-hover”><span><i class=”fa fa-twitter”></i></span>
    <p></p>
    <ul class=”social-media-links”><li class=”social-media-links-hover”><span><i class=”fa fa-instagram”></i></span>
    <p></p>
    <ul class=”social-media-links”><li class=”social-media-links-hover”><span><i class=”fa fa-pinterest”></i></span>
    <p></p>

    I then modified the code as below to change the [li] html shortcode to the standard html

    • :

      <ul class=”social-media-links”>
      [repeater social_media option=true]
      <li class=”social-media-links-hover”><span>[link field=hyperlink][field icon][/link]</span>

      • [/repeater]

      The resulting html below is creating has <p> tags which seems to be preventing the list from displaying horizonally.

      <ul class=”social-media-links”>
      </p>
      <li class=”social-media-links-hover”><span><i class=”fa fa-facebook”></i></span>
      <p></p>
      <li class=”social-media-links-hover”><span><i class=”fa fa-twitter”></i></span>
      <p></p>
      <li class=”social-media-links-hover”><span><i class=”fa fa-instagram”></i></span>
      <p></p>
      <li class=”social-media-links-hover”><span><i class=”fa fa-pinterest”></i></span>
      <p>

      I have also used HTML Raw [raw]…[/raw] and that has not helped.

      How can I get rid of the <br /> and <p> tags so that the list would display horizontally?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi, amyzavier! I would suggest you use native HTML if possible.

    Instead of:

    [li][/li]

    Why not use?

    <li></li>

    Alternatively you could get rid of those pesky empty <p>′s doing something like this:

    .social-media-links p:empty {
   display:none;
}

    I hope that helps.

    Thread Starter amyzavier

    (@amyzavier)

    The css you provided did the trick. Thanks much!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘ACF horizontal list not displaying horizontally’ is closed to new replies.