ListView/LinkPage Bootstrap4 Styling issue

Yii 2.0 General Discussions
1

Hello,
I’ve tried to wrap my head around why the pagination will not display how bootstraps pagination looks. I’ve tried to mimic bootstraps and whats in yii\widgets\LinkPage; and the options I can see in order to get the pagination to display and ends up looking like…

example2
example21110×620 68.5 KB 

ListView::widget([
	'dataProvider' => $articles,
	'itemView' => '_article',
	//'emptyText' =>'',
	'summary' => '',
	'itemOptions' => [
		'tag' => false
	],
	'options' => [
		'tag' => 'div',
		'class' => 'row',
		'id' => false
	],
	'layout' => '{items}<nav>{pager}</nav>',
	'pager' => [
		'options' => [
			'tag' => 'ul',
			'class' => 'pagination justify-content-center',
			'id' => 'pager-container',
		],
		//First option value
		'firstPageLabel' => 'first',
		//Last option value
		'lastPageLabel' => 'last',
		//Previous option value
		'prevPageLabel' => 'previous',
		//Next option value
		'nextPageLabel' => 'next',
		//Current Active option value
		'activePageCssClass' => 'page-active',
		//Max count of allowed options
		'maxButtonCount' => 3,

		// Css for each options. Links
		'linkOptions' => ['class' => 'page-link'],
		'disabledPageCssClass' => 'disabled',

		// Customzing CSS class for navigating link
		'pageCssClass' => ['class' => 'page-item'],
		'prevPageCssClass' => 'page-back',
		'nextPageCssClass' => 'page-next',
		'firstPageCssClass' => 'page-first',
		'lastPageCssClass' => 'page-last',
		],
]);

the html output:

<nav><ul id="pager-container" class="pagination justify-content-center"><li class="page-first"><a class="page-link" href="/index.php?r=site%2Findex&amp;page=1&amp;per-page=3" data-page="0">first</a></li>
<li class="page-back"><a class="page-link" href="/index.php?r=site%2Findex&amp;page=1&amp;per-page=3" data-page="0">previous</a></li>
<li class="page-item"><a class="page-link" href="/index.php?r=site%2Findex&amp;page=1&amp;per-page=3" data-page="0">1</a></li>
<li class="page-item page-active"><a class="page-link" href="/index.php?r=site%2Findex&amp;page=2&amp;per-page=3" data-page="1">2</a></li>
<li class="page-next disabled"><span>next</span></li>
<li class="page-last disabled"><span>last</span></li></ul></nav>

The text is out a lined and isn’t styled. Any help would be greatly appreciated!

1 Like
2

Oh, geez… I pulled a morty… I reread the LinkPager Widget and Bootstrap 4 and learnt that I had to configure LinkPager with LinkPager Bootstrap in my configuration files.

	'container' => [
		'definitions' => [
			\yii\widgets\LinkPager::class => \yii\bootstrap4\LinkPager::class,
		],
	],
3 Likes
3

This helped me today, thanks!