Flexbox/Grid: New reveals have their own

  • Resolved OsakaWebbie

    (@osakawebbie)


    4 years, 7 months ago

    I’m trying to use ALM with either a flexbox or CSS grid. But each set of items comes encased in a fresh <div class="alm-reveal">, which means that the only way the rows will be full is if posts_per_page is a multiple of any number of items in a row at any window width (My maximum is 4 per row, so I guess posts_per_page="12" would work, but I really don’t want that many.) Is there a way to suppress the <div class="alm-reveal">? It’s not really needed, as its parent <div class="alm-listing alm-ajax"> can serve just fine as the container.

    This problem can even be seen in the flexbox example on the plugin website (https://connekthq.com/plugins/ajax-load-more/examples/flexbox/). posts_per_page is at the default 5, so the first row has 3 and the second row has 2. When more are loaded, I would expect the first of the new items to join that second row, but it doesn’t, so the rows alternate between 3 posts and 2 posts.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Darren Cooney

    (@dcooney)

    Hi @osakawebbie Im not sure wha youre are asking about flexbox? The idea is the flex items will adjust to the container and it’s displaying how I intended for this example.

    Here is a css grid example.
    https://connekthq.com/plugins/ajax-load-more/examples/css-grid/

    Closing this ticket.
    thanks

    • This reply was modified 4 years, 7 months ago by Darren Cooney.
    Thread Starter OsakaWebbie

    (@osakawebbie)

    Please don’t mark the thread resolved just because you don’t understand my question. My point isn’t about the CSS, but the markup. Since the markup breaks the list of posts into chunks with a <div>, there is no CSS I can think of that would allow them to flow together.

    The reason your CSS Grid example doesn’t show the issue is that you have posts_per_page=6 and a grid of 3 posts per row. If posts_per_page was a number that was not an even multiple of 3, it would do the same thing.

    Take a look at the page I’m working on: https://l4jp.com/jh/?page_id=233

    1. The first list is using a different plugin, which I would like to replace with yours. But you can see what I’m aiming for – only the last row is incomplete.
    2. Next is your plugin with pause=”true”, which is something else I intend to ask you – the Load More button is hidden (background-color: transparent; opacity: 0; text-indent: -9999px; etc.) so I assume I’m doing something wrong with the parameters of the shortcode. My first choice would be to use pause, but I don’t know why it’s hiding the button – if it’s something obvious, please let me know. (If I use browser dev tools to reveal the button so I can click it, it does function.)
    3. Last is your plugin without the pause. Five posts load at a time, and depending on the size of the browser window, a row contains 4, 3, 2, or 1. In the case of 4, 3, or 2, the last row is incomplete. When more posts load, I would like the new posts to come alongside the existing ones, rather than alternating complete and incomplete rows. Naturally the very last row might be incomplete, but I’m talking about the others.
      Is there any way I can make that happen?
    • This reply was modified 4 years, 7 months ago by OsakaWebbie.
    • This reply was modified 4 years, 7 months ago by OsakaWebbie.
    Plugin Author Darren Cooney

    (@dcooney)

    Hi @osakawebbie,

    2. Set pause_override="true" in your shortcode – since you have an Infinite Scroll style and pause, this setting will start on the scroll and override the pause.

    3. Not sure why you would be setting 5 posts_per_page if you wanted your posts aligned in a grid? My flexbox example is just an example.

    If you want that container removed set transition_container="false" in the shortcode.

    Hope that helps.

    Thread Starter OsakaWebbie

    (@osakawebbie)

    2. I added pause_override="true", but now it just acts as if I had not set pause="true" at all. (See the page now – the two versions act alike as far as I can tell.) How can I get it to show a Load More button and wait until I click it before fetching more?

    3. I set posts_per_page to 5 just so you could see the behavior clearly. I would rather have about 8. Since flexbox is responsive, the only number that would have worked with the “transition container” would have been 12 (multiple of both 4 and 3). But transition_container="false" does exactly what I want – thanks.

    Plugin Author Darren Cooney

    (@dcooney)

    2. Change your loading style on the ALM settings screen and set scroll=”false” in the shortcode.

    Thread Starter OsakaWebbie

    (@osakawebbie)

    Ah, the Loading Style setting was what I was missing. I had already tried scroll="false" before I asked you about it, but then removed it because not seeing either a button or any posts, I thought that combination had broken the whole thing. Now I see that I need this exact combination (written here for the benefit of anyone else who has the same confusion):

    • Loading Style of a button color (ALM Settings page)
    • scroll="false"
    • NOT pause="true" (otherwise it starts with no posts at all)

    Now I consider this thread resolved.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Flexbox/Grid: New reveals have their own’ is closed to new replies.