Hi @harleyqmc it doesn’t look like your CSS is loading, does CSS work at all in your project?

First off: What Ben said! Does your CSS work at all??

Otherwise, if you aren’t using Tailwind, that is likely exactly what Flop.Phoenix.pagination would look like.

These are my [relevant] pagination opts (using Tailwind):

  defp pagination_opts do
    [
      wrapper_attrs: [class: "flex justify-between"],
      pagination_list_attrs: [class: ["flex gap-4 order-2"]],
      previous_link_attrs: [class: "order-1 hero-chevron-left-mini"],
      next_link_attrs: [class: "order-3 hero-chevron-right-mini"]
      page_links: {:ellipsis, 5}
    ]
  end

You can use that that helper function like so:

<Flop.Phoenix.pagination opts={pagination_opts()} meta={@meta} path={@path} {@rest} />

EDIT (which includes much deletion):

If you aren’t using Tailwind then please see @woylie’s answer.

You can change the order by styling the pagination as a flex box and using the order attribute.

That works. If you don’t pass any options, flop_phoenix will use default classes. If you’re ok with those default class names, you can omit the options and just use this snippet:

.pagination {
  display: flex;

  .pagination-list {
    order: 2;
  }

  .pagination-previous {
    order: 1;
  }

  .pagination-next {
    order: 3;
  }
}

Ah, yes, thank you. I was trying to keep my answer complete while trying to remember what it was like to live in the pre-utility class world where I spent 20+ years.

PS, thank you so much for Flop

oopsie… sorry for the confusion there… tailwindcss is working… i wanted a visual aid but wasnt at the machine where i was having the issue so i just stole that from the github pages…

this most definitely worked

def pagination_opts do
[
wrapper_attrs: [class: “flex justify-between”],
pagination_list_attrs: [class: [“flex gap-4 order-2”]],
previous_link_attrs: [class: “order-1 hero-chevron-left-mini”],
next_link_attrs: [class: “order-3 hero-chevron-right-mini”],
page_links: {:ellipsis, 3}
]
end

id never heard of this order attribute… frontend isnt exactly my jam

badass though… thanks for the help… maybe this will benefit someone in the future