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

How to configure popper-opts #5630

Closed
pavlito opened this issue Aug 1, 2020 · 3 comments · Fixed by #5765
Closed

How to configure popper-opts #5630

pavlito opened this issue Aug 1, 2020 · 3 comments · Fixed by #5765

Comments

@pavlito
Copy link

pavlito commented Aug 1, 2020

Documentation for dropdown is examples of how to use popper-opts

@pavlito pavlito changed the title How configure popper-opts How to configure popper-opts Aug 1, 2020
@jacobmllr95 jacobmllr95 added this to To do in v2.17.0 via automation Aug 3, 2020
@jacobmllr95 jacobmllr95 self-assigned this Aug 20, 2020
@jacobmllr95 jacobmllr95 moved this from To do to In progress in v2.17.0 Sep 11, 2020
v2.17.0 automation moved this from In progress to Done Sep 13, 2020
jacobmllr95 added a commit that referenced this issue Sep 13, 2020
…n positioning handling (closes #5700, #5630) (#5765)

* fix(b-form-datepicker/b-form-timepicker/b-nav-item-dropdown): dropdown positioning handling

* Update events.js

* Update bv-form-btn-label-control.js

* Update bv-form-btn-label-control.js

* Update bv-form-btn-label-control.js
@ahsatha
Copy link

ahsatha commented Jan 24, 2021

Wondering the same, popper docs are very good but couldn't find a way to do pass popper-opts to a dropdown ):

@Szymon-dziewonski
Copy link

Szymon-dziewonski commented Mar 9, 2021

@ahsatha I was able to track down what format it has, and what is working looks like

:popper-opts="{
    modifiers: {
      preventOverflow: {
        padding: 0
      }
    }
  }"

Everything is happening here https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/mixins/dropdown.js#L266 , they look for you object and merge it here https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/mixins/dropdown.js#L277
At the end format is different. Initially I tried to pass

{modifiers: [{
    name: 'preventOverflow',
    options: {
      tether: false, // true by default
    },
  }]}

But it doesnt work because as you can see they pass simple objects without name etc

{
   modifiers: {
      offset: {
          offset: 20
        },
   }
}

Hope this will help you guys ! :)

@igorburenko
Copy link

igorburenko commented May 8, 2021

this works for me
b-dropdown( :popper-opts={ placement: 'top', modifiers: { offset: { offset: '0,40px' } } } class="your-class")
You can modify for your taste )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v2.17.0
  
Done
5 participants