Skip to content

Conversation

@oliver681
Copy link
Contributor

Describe the PR

closes #2225

Placeholder <span>-elements generated by vBPopover- and vBTooltip-directives consumed space in flex containers. By adding position: absolute the placeholder element it won't effect the user`s layout anymore.

Small replication

<template>
  <div style="margin: 10vw; border: 1px solid grey">
    <div class="d-flex justify-content-between align-items-center">
      Heading
      <BButton v-b-tooltip="'test'" size="sm" class="btn-smaller">
        Test
      </BButton>
    </div>
  </div>
</template>

Before:

grafik

Now:

grafik

PR checklist

What kind of change does this PR introduce? (check at least one)

  • Bugfix 🐛 - fix(...)
  • Feature - feat(...)
  • ARIA accessibility - fix(...)
  • Documentation update - docs(...)
  • Other (please describe)

The PR fulfills these requirements:

  • Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 26, 2024

Open in Stackblitz

pnpm add https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2234
pnpm add https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2234

commit: aed556e

@VividLemon VividLemon merged commit 9e4d8b7 into bootstrap-vue-next:main Sep 26, 2024
@github-actions github-actions bot mentioned this pull request Sep 26, 2024
@xvaara
Copy link
Contributor

xvaara commented Oct 10, 2024

@VividLemon @oliver681 this is the wrong way to correct this flaw. You could use componenets to control the elements, or move the span to body with the body modifier, or as a child with the child modifier. I'm gonna revert this.

@xvaara
Copy link
Contributor

xvaara commented Oct 10, 2024

@VividLemon I'm even thinking should we default to body and add inline which adds it next to the element?

xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Oct 10, 2024
xvaara added a commit that referenced this pull request Oct 10, 2024
@github-actions github-actions bot mentioned this pull request Oct 7, 2024
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Oct 10, 2024
* upstream/main: (27 commits)
  fix(vBPopover): revert bootstrap-vue-next#2234 (bootstrap-vue-next#2256)
  fix(BModal): fix backdrop, fade and reduced animation (bootstrap-vue-next#2250)
  fix(BTable): busy slot behavior to match bootstrap-vue fixes bootstrap-vue-next#1636  (bootstrap-vue-next#2249)
  fix(BTable): cast formatted items to string fixes bootstrap-vue-next#2227 (bootstrap-vue-next#2247)
  doc(BDropdown): Parity pass on component and helpers (bootstrap-vue-next#2243)
  fix(BTable): use watcher to compare changes with selectedItems fixes bootstrap-vue-next#2245 (bootstrap-vue-next#2246)
  fix(BTable)!: rename event row-dbl-clicked to row-dblclicked (bootstrap-vue-next#2239)
  docs: Work around unplugin bug (bootstrap-vue-next#2226)
  docs(BCollapse): Parity pass (bootstrap-vue-next#2237)
  fix directives in vite template
  chore: release main (bootstrap-vue-next#2235)
  fix(vBPopover): add position absolute to floating directives (bootstrap-vue-next#2234)
  chore: release main (bootstrap-vue-next#2231)
  fix(BTable): select mode range when table is sorted fixes bootstrap-vue-next#2229 (bootstrap-vue-next#2230)
  Update migration-guide.md
  chore: release main (bootstrap-vue-next#2223)
  refactor(useColorVariantClasses): add border variants into its resolver (bootstrap-vue-next#2224)
  feat(colorvariant): add subtle and emphasis variant fixes bootstrap-vue-next#2079
  chore: release main (bootstrap-vue-next#2220)
  fix(BModal): fix jumping when scrollbars are present (bootstrap-vue-next#2211)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

<span>-element placed by v-b-tooltip directive shifts content in flex container

3 participants