Option to maximise dialog

[Synchro]

This is a feature request. I've tried various means of maximising dialogs (taking up the full window size minus a small margin so it's still apparent it's a modal) for page previews, in-page reports etc with bootstrap with mixed success. I'd really like to be able to do all my dialogs with bootbox, and that's the only use case I'm currently using (not very pretty) custom code for.

[n1ckfury]

The modal has a class of modal so I just used CSS to maximize the width of it.
It looked like that in the CSS file:
.modal {
width; 100%;
}

I hope this will help.

[Synchro]

Sure, but height and scrolling is a little more problematic, especially if it's in a responsive layout. I have this partially working using bootstrap-modal, but it's not working that well, and Bootbox is much nicer to use.

[makeusabrew]

Sorry - this isn't something Bootbox is likely to ever support. One fundamental thing I never want to introduce is a reliance a CSS file which would be hard to avoid doing something like this.

Ultimately as you've sort of alluded to this feels more like a bootstrap issue - e.g. it's the display of bootstrap modals you're really trying to alter here. As such it feels like something which should / could be achieved using CSS, at which point you can simply pass in a custom class to your modals to pick up the 'maximised' styling.

Hope that helps a bit...

Nick

[Synchro]

It's just that it's not possible with CSS - I wouldn't have asked if it was. You have to use JS to do a calculation for the height. One solution would be to support setting an explicit width and height in the options, and allow a callback to do the size calculation. That's entirely independent of bootstrap. Otherwise I end up having to configure each individual dialog in two places instead of one, removing one of the main attractions of bootbox.

[makeusabrew]

True, I didn't really think that one through. Nevertheless it would still see the library creeping further and further away from its design goals. Supporting an optional width and height option wouldn't be the end of the world though I suppose. If it were to happen, how would you expect / hope the callback to be invoked? If I'm understanding, you'd like (roughly):

bootbox.alert({
  foo: "bar",
  width: function(/* any params here?*/) {
    return "95%";
  }
  // also support a fixed value e.g. "width: 50%", support height too
});

I'm interested how width / height being a function helps here but think I'm missing the point (need another coffee). The dimensions would have to be set when the dialog was created so there's no real way defer the width / height calculations much.

[Synchro]

I'm thinking something like this:

bootbox.alert({
  foo: "bar",
  width: "95%",
  height: function() {
      return String($(window).height() - 165) + 'px';
    }
  }
});

It's in a callback so that the height is calculated at the time the box is opened since the window size could have changed after the page was loaded. Does that seem sane?

[makeusabrew]

That's the bit I couldn't quite get - you don't need the callback there as the contents of the object will only be evaluated when the alert is is triggered anyway (most likely itself in a callback, e.g. as a response to some other action). In your example height could simply height: String($(window).height() - 165) + 'px'. I can't see a scenario where we'd need a callback - that would only be useful if it could be called at some point after dialog initialisation, and/or passed a useful value as an argument. But since the height / width would have to be set upon initialisation there's no scope for deferring their calculation.

I'll get width and height options added to the 4.2 task list :)

[Synchro]

Thanks!

[snimavat]

is there an option now to specify maximum height ? - cant find it in docs

[tiesont]

No, there isn't. If you're using Bootbox 5 and Bootstrap 4.3.0 or newer, there is a scrollable option I added to allow you to take advantage of the modal-dialog-scrollable class, which automatically makes the modal's content scrollable. http://bootboxjs.com/documentation.html#bb-option-scrollable and https://getbootstrap.com/docs/4.3/components/modal/#scrolling-long-content

Otherwise, you can handle this yourself by using the className property and adding your own CSS rules for constraining the modal body, which is what I used to do before that option became available.