🌐 AI搜索 & 代理 主页
Skip to content

Upgrade to 2.12.0 affects <b-avatar> default slot content alignment #5205

@Dean-Christian-Armada

Description

@Dean-Christian-Armada

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

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions