Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Responsive Durandal dialog

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?

like image 325
chipatama Avatar asked Mar 22 '23 04:03


1 Answers

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:


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 () {
        }, 200);

    compositionComplete: function (child, parent, context) {
        var theDialog = dialog.getDialog(context.model);
    attached: null

and then activate with:

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

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


And your view should follow the markup pattern:

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

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

like image 72
Shaun Rowan Avatar answered Mar 31 '23 19:03

Shaun Rowan