harleyqmc
How do you change the order of <Flop.Phoenix.pagination meta={@meta} event=“paginate-whatever” />?
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
but didnt get far
any help if you could
thanks in advance
Marked As Solved
sodapopcan
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.
Also Liked
harleyqmc
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
sodapopcan
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 
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"