Level 51
can you post the actual render or add it on tailwind play ?
Feb 16, 2023
6
Level 8
How can I implement this responsive style on my pagination?
I use tailwind css for my pagination, I have a little problem with a style.
This image is my default paging style here, that's fine.
My problem is here: it's my responsive image and it's not what I want. I also need to make it flexible inline like the first image on mobile.
My code:
<div
class="mt-5 flex flex-wrap items-center justify-center gap-x-1 text-xs font-semibold bg-black"
>
<div
class="bg-dark-item-bg m-2 flex h-8 w-8 cursor-not-allowed items-center justify-center rounded-full text-gray-500"
>
<svg
aria-hidden="true"
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<a
class="bg-dark-item-bg hover:bg-blue-500 bg-dark-item-bg border-blue text-blue m-2 flex h-8 w-8 items-center justify-center rounded-full border text-white"
href="#"
>1</a
><a
class="bg-dark-item-bg hover:bg-blue-500 m-2 flex h-8 w-8 items-center justify-center rounded-full text-white"
href="#"
>2</a
><a
class="bg-dark-item-bg hover:bg-blue-500 m-2 flex h-8 w-8 items-center justify-center rounded-full text-white"
href="#"
><svg
aria-hidden="true"
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path></svg
></a>
</div>
You will certainly tell me that it is the flex-wrap that makes the image 👇 this result.
When I remove the flex-wrap I can add the shrink-0 but still nothing nice. -_-
Level 8
@webrobert here is the tailwind play link :
Level 51
@d3v,
a couple thoughts...
one let the pagination scroll horizontally on small screens... https://play.tailwindcss.com/DOSJDXT9Me (if you use this note the special style I added to remove the scroll bar)
OR
I get that for fat fingers like mine we dont want to make the circles to small to click. So you could conditional remove a bunch of the circles on small screens.
And the third option - there isn't a good solution, in tailwind for centering a second row in with flex-wrap so we have to force a width on the [items] but this then breaks the overall width. So if you are ok with two rows of circles centered I can post a link to that solution.
Level 8
@webrobert I would like something like laravel pagination mobile
Level 51
@d3v have a link?
Level 8
@webrobert not yet but I think I understand. I will hide it in sm and show another one for mobile. Thx
Please or to participate in this conversation.