Skip to content
  • Sponsor bootstrap-vue/bootstrap-vue

  • Notifications You must be signed in to change notification settings
  • Fork 1.9k

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

Closed
leonyork/cognito-oauth2-demo
#1
@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>

Activity

changed the title [-]Upgrade to 2.12.0 destroys `<b-avatar>` custom texts.[/-] [+]Upgrade to 2.12.0 destroys <b-avatar> custom texts.[/+] on Apr 21, 2020
added a commit that references this issue on Apr 21, 2020
46c3229
tmorehouse

tmorehouse commented on Apr 21, 2020

@tmorehouse
Member

A fix is on it's way.

In the meantime, you can use the following css to address it:

.b-avatar .b-avatar-custom {
  align-items: center;
}

Or if using scoped CSS:

.b-avatar /deep/ .b-avatar-custom {
  align-items: center;
}
changed the title [-]Upgrade to 2.12.0 destroys <b-avatar> custom texts.[/-] [+]Upgrade to 2.12.0 affects `<b-avatar>` default slot content alignment[/+] on Apr 21, 2020
added a commit that references this issue on Apr 22, 2020
c4981fd
tmorehouse

tmorehouse commented on Apr 28, 2020

@tmorehouse
Member

BootstrapVue v2.13.0 has been released

1 remaining item

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

      Upgrade to 2.12.0 affects `<b-avatar>` default slot content alignment · Issue #5205 · bootstrap-vue/bootstrap-vue