-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Closed
leonyork/cognito-oauth2-demo
#1Labels
Status: Fixed / ImplementedIssue fixed by a new releaseIssue fixed by a new releaseStatus: Workaround AvailableType: BugType: SCSS
Description
Describe the bug
Upgrade to 2.12.0 destroys <b-avatar> custom texts.
Expected behavior
Before, I was using 2.9.0, when I upgraded to 2.12.0 the vertical alignment is on the very top of the avatar where it was in the middle before the upgrade.
Environment:
- Device: Mac
- OS: macOS Mojave
- Browser: Chrome
- Version: 81
Additional context
I did a little inspect element in Google Chrome and below is the comparison between the <b-avatar> of 2.12.0 and 2.9.0
2.12.0
<span
data-v-4f060db8=""
class="b-avatar badge-secondary rounded-circle position-absolute active"
id="plan-release-button"
style="width: 4.1em; height: 4.1em;"
>
<span class="b-avatar-custom">
XX<br data-v-4f060db8="" />
YY
</span>
<!---->
</span>
2.9.0
<span
data-v-76e35a42=""
id="plan-release-button"
class="b-avatar badge-secondary rounded-circle position-absolute active"
style="width: 4.1em; height: 4.1em;"
>
XX<br data-v-76e35a42="" />
YY
</span>
The main difference is in 2.12.0, there is a <span class="b-avatar-custom"> inside my span. To be precise, the css rule of height: 100% in b-avatar-custom made my texts vertically aligned. If you commented the height:100% it will become fine again in the center. Below is how I used b-avatar in my VueJS
<b-avatar
size="4.1em"
id="plan-release-button"
variant="secondary"
class="position-absolute active"
>
發佈<br />
計劃
</b-avatar>
Metadata
Metadata
Assignees
Labels
Status: Fixed / ImplementedIssue fixed by a new releaseIssue fixed by a new releaseStatus: Workaround AvailableType: BugType: SCSS