Responsive Durandal dialog

Question

I\'m using Durandal in my new application and I have an issue with Durandal\'s dialog window (I\'m using it to get some data from users).

When I set width of window

Answer 1

I believe the Durandal modal is receiving love in Durandal 2.1 although I do not know if it will be responsive.

In the meanwhile, Durandal provides all the hooks you need to implement your own modal functionality - including the ability to define different types of modal dialogs. You can read more about it here:

http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html

I experimented briefly with this via some code found on google groups and was able to get bootstrap 3 modals working.

You're welcome to try it out and see if it works for you. Note that you must be using bootstrap 3 for this to work (durandal 2.0 starterkit etc comes with bootstrap 2)

In dialog.js, just before return dialog;

dialog.addContext('bootstrap', {
    addHost: function (theDialog) {
        var body = $('body');
        $('<div class="modal fade" id="myModal"></div>').appendTo(body);
        theDialog.host = $('#myModal').get(0);
    },
    removeHost: function (theDialog) {
        setTimeout(function () {
            $('#myModal').modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }, 200);

    },
    compositionComplete: function (child, parent, context) {
        var theDialog = dialog.getDialog(context.model);
        $('#myModal').modal('show');
    },
    attached: null
});

and then activate with:

dialog.show(viweModel, null, 'bootstrap')

or I believe this would work also but I didn't test it:

dialog.showBootstrap(viewModel)

And your view should follow the markup pattern:

<div class="messageBox">
    <div class="modal-header">
        Header Markup
    </div>
    <div class="modal-body">
        Body Markup
    </div>
    <div class="modal-footer">
        Footer Markup
     </div>
</div>

Here is the gist where I got the code: https://gist.github.com/webm0nk3y/7603042

And the relevant google groups thread: https://groups.google.com/forum/#!topic/durandaljs/8g7DDCuvlpU

Answer 2

If you want to disable the width-setting for custom modals, you can add the following style definition to your outermost div:

<div style="width:auto;">

Please note that this can cause strange behaviour in some browsers.

If there is something else you would like to have for MessageBoxes or Modals, especially for their positioning and sizing, please let me know and I can make some changes to the code. My email is tommi.gustafsson at loyalistic.com.

UPDATE 14 Jan 2014:

I made a new revision of dialog.js, which helps with problems with customizing the MessageBox (not custom modals). You can find it at:

https://github.com/TommiGustafsson/Durandal/blob/master/src/plugins/js/dialog.js

(That's still unofficial, since it's in my fork of Durandal.)

You can find the instructions how to use it here:

https://github.com/BlueSpire/Durandal/pull/362#issuecomment-32180718

If you have problems with MessageBox, I think this might help you.