Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Dean-Christian-Armada opened this issue Apr 21, 2020 · 2 comments · Fixed by #5207 · May be fixed by leonyork/cognito-oauth2-demo#1
Closed

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

Dean-Christian-Armada opened this issue Apr 21, 2020 · 2 comments · Fixed by #5207 · May be fixed by leonyork/cognito-oauth2-demo#1

Comments

@Dean-Christian-Armada
Copy link

Dean-Christian-Armada commented Apr 21, 2020

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>
@Dean-Christian-Armada Dean-Christian-Armada changed the title Upgrade to 2.12.0 destroys <b-avatar> custom texts. Upgrade to 2.12.0 destroys <b-avatar> custom texts. Apr 21, 2020
@tmorehouse
Copy link
Member

tmorehouse commented Apr 21, 2020

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;
}

@tmorehouse tmorehouse 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 Apr 21, 2020
jacobmllr95 added a commit that referenced this issue Apr 22, 2020
: #5205) (#5207)

* fix(b-avatar): set `align-items: center` for default slot content (fixes: #5205)

* Update README.md

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
@tmorehouse tmorehouse mentioned this issue Apr 22, 2020
9 tasks
@tmorehouse
Copy link
Member

tmorehouse commented Apr 28, 2020

BootstrapVue v2.13.0 has been released

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