How to give vertical height manually in bootbox

Question

I want to give vertical height manually in a bootbox prompt.

Here is the bootbox, We can fix it exactly in the center but I want to place it slightly above.

      $('#btnNewPra').on('click',function(){
          bootbox.prompt({
            size: "small",
            title: 'Spot',
            margin: '50px' ,
            // centerVertical: true,
            callback: function(result){

            }
          })
        })

Please read https://stackoverflow.com/help/mcve and improve your question accordingly. — jasie, Oct 11 '19 at 13:04

score 0 · Answer 1 · answered Oct 16 '19 at 04:07

Your simplest option is to use the className option and some custom CSS, like so: https://jsfiddle.net/6vmjpx3y/

bootbox.prompt({
  size: "small",
  title: 'Spot',
  className: 'mini-box',
  centerVertical: true,
  callback: function(result) {

  }
})

and

.mini-box .modal-dialog-centered .modal-content {
  margin-top: -50px;
}

The className value would be whatever makes the most sense for you. There are probably other ways of accomplishing this, but using the centerVertical option adds the .modal-dialog-centered class to the dialog wrapper. You can then apply a negative margin to the .modal-content class (the outermost "visible" part of the modal) to pull the dialog up your desired amount from the center of the viewport.

How to give vertical height manually in bootbox

1 Answers1