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

2 Answers 2

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.