[Vuejs]-How can I move this modal to right?

by

0👍

Let me help. You can use the position with top and right direction. I sai sorry if i wrng

app = new Vue({ //not vue, it is Vue
  el: "#app",
  data: {
    myclass: ['myclass']
  },
  methods: {
    showModal: function(){
      this.$refs.myModalRef.show()
    }
  }
})
.myclass > div {
  position:absolute !important;
  top: -10px !important;
  right: -10px !important;
  background-color:yellow !important;
}

.myclass > .modal-dialog > .modal-content {
  background-color:red !important;
}
.b_button{
position:absolute !important;
  top: 10px !important;
  right: 10px !important;
}
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
    <b-button @click="showModal" class="b_button">
      Open Modal
    </b-button>
  <b-modal ref="myModalRef" :modal-class="myclass" size="lg">
      <h2>Test</h2>
  </b-modal>
</div>

Leave a comment