How do you change the order of <Flop.Phoenix.pagination meta={@meta} event=“paginate-whatever” />?

Phoenix Forum Questions / Help
,
1

hi

hate to ask such a remedial question but how do you change the order of

<Flop.Phoenix.pagination meta={@meta} event=“paginate-whatever” />

so the output is

previous 2 3 4 5 next

instead of the default that looks like this

i tried as many options as i could work out from here

https://hexdocs.pm/flop_phoenix/Flop.Phoenix.html

but didnt get far

any help if you could

thanks in advance

2

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

3

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

image
image1480×48 2.44 KB

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.

4

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

5

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;
  }
}
6

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 :heart:

1 Like
7

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

2 Likes