Level 75
Problem is with svg icon
Sep 30, 2020
15
Level 2
Huge pagination buttons
Hello Before update I didn't have huge buttons with pagination. I don't know what can be the reason. I get something like this: https://ibb.co/pvj01F3 https://ibb.co/R3CB5s2
What can be the problem? It is in the row and col-12:
<div class="row">
<div class="col-12 d-flex justify-content-center pt-4">
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
<div class="flex justify-between flex-1 sm:hidden">
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
« Previous
</span>
<a href="http://page.test/blacklist?page=2" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
Next »
</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 leading-5">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">20</span>
of
<span class="font-medium">27</span>
results
</p>
</div>
<div>
<span class="relative z-0 inline-flex shadow-sm rounded-md">
<span aria-disabled="true" aria-label="&laquo; Previous">
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</span>
</span>
<span aria-current="page">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">1</span>
</span>
<a href="http://page.test/blacklist?page=2" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 2">
2
</a>
<a href="http://page.test/blacklist?page=2" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="Next &raquo;">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
</a>
</span>
</div>
</div>
</nav>
</div>
</div>
Level 2
I don't know how to fix. The blader is like this:
<div class="row">
<div class="col-12 d-flex justify-content-center pt-4" class="li: { list-style: none; }">
{{ $blacklist->links() }}
</div>
</div>
If I remove the $blacklist->links() then the big icon will not appear but the pagination too of course but I don't know how to change the icon. I didn't change anything with the design of the pagination.
Level 27
use Tailwind method on your AppServiceProvider
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::useTailwind();
}
Level 2
I checked before with mozilla and no change and now I checked with Microsoft Edge and Chrome and I get this: https://ibb.co/ByNCBBP
Level 2
Laravel 8.7.1.
Level 1
I have the same problem. TailWind is not solving my problem.
Level 75
Use the bootstrap template.
Level 1
How can I do it, Could you please explain a bit. I am new, thanks.
Level 75
Couldn't edit last answer, or publish the template and size as you wish.
Level 75
The paginator now uses the Tailwind CSS framework for its default styling. In order to keep using Bootstrap, you should add the following method call to the boot method of your application's AppServiceProvider:
use Illuminate\Pagination\Paginator;
Paginator::useBootstrap();
Some reply above has some code messing up the editing.
7 likes
Level 75
To publish
https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view
However, the easiest way to customize the pagination views is by exporting them to your resources/views/vendor directory using the vendor:publish command:
php artisan vendor:publish --tag=laravel-pagination
This command will place the views in the resources/views/vendor/pagination directory. The tailwind.blade.php file within this directory corresponds to the default pagination view. You may edit this file to modify the pagination HTML.
If you would like to designate a different file as the default pagination view, you may use the paginator's defaultView and defaultSimpleView methods within your AppServiceProvider:
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::defaultView('view-name');
Paginator::defaultSimpleView('view-name');
}
All in documentation.
1 like
Level 1
Thank you so much. This solves my issue. But now I hade another issue. Now It is creating a second empty html tag structure. Not every page. It's making that randomly.
window.top.postMessage('{"msg_type":"resize-me","key_value":[{"key":"r_nh","value":"0"},{"key":"qid","value":"CPW39InMmewCFc8e0wodvAsBtg"}],"googMsgType":"sth"}', '*');window.top.postMessage('{"msg_type":"adsense-labs","key_value":[{"key":"settings","value":"[\\\"ca-pub-7191986680895282\\\"]"}],"googMsgType":"sth"}', '*');Level 75
You probably need to either search tailwind docs or view some tailwin videos to better understand what's going on.
That way you can rewrite portions as needed. but show the code you refer to, formatted.
Level 75
@jeffreyway It seems to be same problem on Laracasts as well. Look on this page
Level 75
@beginnersoul Which I noticed also a couple of days ago also, so just go in and style as you like.
Please or to participate in this conversation.