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
1 Like
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.
1 Like
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 
1 Like
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
3 Likes