javascript - unable to set buefy modal width - Stack Overflow

admin管理员组

文章数量:1424977

I am using vuejs with bulma and buefy. I am using buefy modal and trying to set the modal width using its 'width' property. I tried to specify it in the html as well as using javascript to open the modal.

this.$modal.open({
  parent: this,
  ponent: dummyComponent,
  width: 720
}) 

Can someone please help me out.

I am using vuejs with bulma and buefy. I am using buefy modal and trying to set the modal width using its 'width' property. I tried to specify it in the html as well as using javascript to open the modal.

this.$modal.open({
  parent: this,
  ponent: dummyComponent,
  width: 720
}) 

Can someone please help me out.

• javascript
• vue.js
• bulma
• buefy

Share Improve this question Follow asked Jun 6, 2018 at 11:20 Vipul SharmaVipul Sharma 79833 gold badges1111 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You also need to set style="width: auto" in your ponent, then the width you set when opening the modal is taken into account.

Then the js part would stay

this.$modal.open({
  parent: this,
  ponent: dummyComponent,
  width: 720
}) 

and your ponent would be

<template>
  <div class="modal-card" style="width: auto">
   <!-- Content es here... -->
  </div>
</template>

Examples in the buefy documentation include it as well but they don't explicitly state that you need it to make setting the width work.

Actually, for me it doesn't work.

this.$modal.open({
  parent: this,
  ponent: dummyComponent,
  width: 1200
})

It produces modal with 640px in width. If I set

<template>
  <div class="modal-card" style="width: auto">
    <!-- Content es here... -->
  </div>
</template>

It produces even narrower modal, 460px. Not sure why. My solution was:

<style lang="stylus" scoped>
  .modal-card
    width: auto
  @media (min-width: 1200px)
    .modal-card
      width: 1200px
</style>

Not a prettiest solution, but it works. I also had to add z-index to .modal, as some parts of my html cover modal backdrop.

本文标签： javascriptunable to set buefy modal widthStack Overflow