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 manually, (by default Durandal set window position from JavaScript) and if I want to have window width 600px , I need to do that through CSS with .dialog { width: 600px! important}. and that's where all the problems starts.

On window resize, dialog is not responsive anymore, and when I have big form in it and window height is small, for example on laptops I cant see a half of my form and I don't get any scroll.

On mobile devices it's a total mess. Does anyone knows how to make this thing work?

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