Yii Framework Wiki
Difference between
#2 and
#3 of
Yii2 - Upgrading to Bootstrap 4
Revision #3 has been created by Richard Pillay on Feb 24, 2020, 7:06:54 AM with the memo:
Added more issues to be fixed
« previous (#2) next (#4) »
Changes
Title unchanged
Yii2 - Upgrading to Bootstrap 4
Category unchanged
How-tos
Yii version unchanged
2.0
Tags unchanged
newbie,Twitter Bootstrap,navbar,bootstrap4
Content changed
Yii2 - Converting from Bootstrap3 to Bootstrap4
<br>
This article has been written because while conversion is a largely pain-free process, there are some minor issues. These are not difficult to solve, but it is not immediately obvious where the problem lies.
<br>
1 - Install Bootstrap4
<br>
**Breadcrumbs**
So, that fixed my navbar.Running my tests pointed me to other problems, but I won't go into those. Now that you know the process, you can find all your errors and fixNext, I noticed that the breadcrumbs were not quite right - the slash separating the path elements was no longer there. Preparing for a lot of debugging, I went to the Bootstrap site to look for a little inspiration. I didn't need to look any further - Bootstrap 4 requires each Breadcrumb element to have a class of "breadcrumb-item". After I spent a little time looking at vendors/yiisoft/yii2/widgets/Breadcrumbs.php to get some understanding of the issue, I discovered all that's needed is to change the itemTemplate and activeItemTemplate. Of course, since these are part of the Yii2 framework, you don't want to change that file, otherwise, it will probably get updated at some stage, and all your changes would be lost. Since both of these attributes are public, you can change them from outside the class, and the easiest place to do this is in frontend/views/main.php:
```html
<div class="container">
<?= Breadcrumbs::widget([
'itemTemplate' => "\n\t<li class=\"breadcrumb-item\"><i>{link}</i></li>\n", // template for all links
'activeItemTemplate' => "\t<li class=\"breadcrumb-item active\">{link}</li>\n", // template for the active link
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>```
<br>
**Data Grid ActionColumn**
One of my pages was a data grid generated for me by gii. On each row it has a set of buttons that you can click to view, edit or delete the row. Under Bootstrap 4, the ActionColumn disappeared. Viewing the page source showed me it was there, but I couldn't see it or click on it. Going to the migration guide, it turns out that Bootstrap 3 includes icons, but Bootstrap 4 doesn't. I got a lot of help from a [question asked in the Yii2forum.](https://github.com/yiisoft/yii2/issues/17479). In the end, my solution was to get a local copy of FontAwesome 5 by including the line "fortawesome/font-awesome": "^5.12.1" in the require section of composer.json, and then choosing them in the same way - I need to fix problems in some of my forms where the action buttons are now being rendered in a space too small to be visiblecons that I wanted. I spent a lot of time figuring out how to do this, but when I was done, it seemed almost anti-climactic in it's simplicity. This is what I did in my data form:
````html
['class' => 'yii\grid\ActionColumn',
'buttons' => [
'update' => function($url,$model) {
return Html::a('<i class="fas fa-edit"></i>', $url, [
'title' => Yii::t('app', 'update')
]);
},
'view' => function($url,$model) {
return Html::a('<i class="fas fa-eye"></i>', $url, [
'title' => Yii::t('app', 'view')
]);
},
'delete' => function($url,$model) {
return Html::a('<i class="fas fa-trash"></i>', $url, [
'title' => Yii::t('app', 'delete')
]);
}
]
],
````
<br>
**Functional Tests**
Not seeing anything more visually, at least nothing that was obvious, I now ran the suite of tests. These were all previously passing, but now several of them failed. One of them was the Contact Form, so I ran that one separately and the tests informed me they were failing because they couldn't see the error message:
```
1) ContactCest: Check contact submit no data
Test ../frontend/tests/functional/ContactCest.php:checkContactSubmitNoData
Step See "Name cannot be blank",".help-block"
Fail Element located either by name, CSS or XPath element with '.help-block' was not found.
```
<br>
I, on the other hand, could see the error messages on the form, so I used the browser's page source and discovered that the css class was no longer "help-block", it had changed to "invalid-feedback". Easy enough - in frontend/tests/_support/FunctionalTester.php, I changed the expected css class:
public function seeValidationError($message)
{
$this->see($message, '.invalid-feedback');
}
Of course, this little excerpt is just an example. I found the same thing had to be done in several locations, but all were easily found and resolved.
<br>
After this, running my tests pointed me to no other problems, but I don't expect that to mean there **aren't** any other problems. While everything seems to be working so far, I expect there are more issues hiding in the woodwork. Somehow, those problems don't seem quite so insurmountable anymore.
<br>
This article has been written because while conversion is a largely pain-free process, there are some minor issues. These are not difficult to solve, but it is not immediately obvious where the problem lies.
<br>
1 - Install Bootstrap4
[...]
'class' => 'navbar navbar-expand-md navbar-light bg-dark',<br>
**Breadcrumbs**
So, that fixed my navbar.
```html
<div class="container">
<?= Breadcrumbs::widget([
'itemTemplate' => "\n\t<li class=\"breadcrumb-item\"><i>{link}</i></li>\n", // template for all links
'activeItemTemplate' => "\t<li class=\"breadcrumb-item active\">{link}</li>\n", // template for the active link
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>```
<br>
**Data Grid ActionColumn**
One of my pages was a data grid generated for me by gii. On each row it has a set of buttons that you can click to view, edit or delete the row. Under Bootstrap 4, the ActionColumn disappeared. Viewing the page source showed me it was there, but I couldn't see it or click on it. Going to the migration guide, it turns out that Bootstrap 3 includes icons, but Bootstrap 4 doesn't. I got a lot of help from a [question asked in the Yii2forum.](https://github.com/yiisoft/yii2/issues/17479). In the end, my solution was to get a local copy of FontAwesome 5 by including the line "fortawesome/font-awesome": "^5.12.1" in the require section of composer.json, and then choosing the
````html
['class' => 'yii\grid\ActionColumn',
'buttons' => [
'update' => function($url,$model) {
return Html::a('<i class="fas fa-edit"></i>', $url, [
'title' => Yii::t('app', 'update')
]);
},
'view' => function($url,$model) {
return Html::a('<i class="fas fa-eye"></i>', $url, [
'title' => Yii::t('app', 'view')
]);
},
'delete' => function($url,$model) {
return Html::a('<i class="fas fa-trash"></i>', $url, [
'title' => Yii::t('app', 'delete')
]);
}
]
],
````
<br>
**Functional Tests**
Not seeing anything more visually, at least nothing that was obvious, I now ran the suite of tests. These were all previously passing, but now several of them failed. One of them was the Contact Form, so I ran that one separately and the tests informed me they were failing because they couldn't see the error message:
```
1) ContactCest: Check contact submit no data
Test ../frontend/tests/functional/ContactCest.php:checkContactSubmitNoData
Step See "Name cannot be blank",".help-block"
Fail Element located either by name, CSS or XPath element with '.help-block' was not found.
```
<br>
I, on the other hand, could see the error messages on the form, so I used the browser's page source and discovered that the css class was no longer "help-block", it had changed to "invalid-feedback". Easy enough - in frontend/tests/_support/FunctionalTester.php, I changed the expected css class:
public function seeValidationError($message)
{
$this->see($message, '.invalid-feedback');
}
Of course, this little excerpt is just an example. I found the same thing had to be done in several locations, but all were easily found and resolved.
<br>
After this, running my tests pointed me to no other problems, but I don't expect that to mean there **aren't** any other problems. While everything seems to be working so far, I expect there are more issues hiding in the woodwork. Somehow, those problems don't seem quite so insurmountable anymore.
6 followers
Viewed: 79 384 times
Version: 2.0
Category: How-tos
Written by: Richard Pillay
Last updated by: Richard Pillay
Created on: Feb 16, 2020
Last updated: 4 years ago
Revisions
View all history-
4 years ago by
Richard Pillay Added a note regarding Breadcrumbs to pr...
-
4 years ago by
Richard Pillay Added more issues to be fixed
-
4 years ago by
Richard Pillay Minor - punctuation
- 4 years ago by Richard Pillay