Geek Answers Handbook

Responsive Durandal dialogue

I use Durandal in my new application and I have a problem with the Durandal dialog box (I use it to get some data from users).

When I set the window width manually (by default, Durandal sets the window position with JavaScript), and if I want to have a window width of 600 pixels, I need to do this via CSS using .dialog { width: 600px! important}. and where all the problems begin.

When a window is resized, the dialog no longer responds, and when I have a large shape in it and the window height is small, for example, on laptops I can’t see half my shape and I don’t get scrolling.

On mobile, this is a complete mess. Does anyone know how to make this thing work?

+4
source share
2 answers

I believe that Durandal fashion gets love in Durandal 2.1, although I don’t know if it will be responsive.

At the same time, Durandal provides all the hooks you need to implement your own modal functions, including the ability to define various types of modal dialogs. You can read about it here:

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

In short, I experimented with this using some code found in google groups, and was able to get bootable modal boot files.

You can try and see if this works for you. Note that you must use bootstrap 3 for this to work (durandal 2.0 starterkit etc. Comes with bootstrap 2)

dialog.js, 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
});

:

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

, , :

dialog.showBootstrap(viewModel)

:

<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>

, : https://gist.github.com/webm0nk3y/7603042

google: https://groups.google.com/forum/#!topic/durandaljs/8g7DDCuvlpU

+7

, div:

<div style="width:auto;">

, .

- , MessageBoxes Modals, , , . - tommi.gustafsson loyalistic.com.

14 2014 :

dialog.js, MessageBox ( ). :

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

( , Durandal.)

:

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

MessageBox, , .

0

More articles:


All Articles