locked
HTML client (March 2014 update) - controlling dialog screen size and position RRS feed

  • Question

  • I have a modal dialog screen that needs to be larger than the default in both height and width. I can use one of the Group control post-render methods on that dialog to set the height and Width, but I cannot seem to shift the dialog up by changing the top-margin of the dialog. I want the dialog to move up due to the fact that it is so large.

    This is the code in the Group control post-render method:

    myapp.MyLargePicker.SomeGroupControl_postRender = function (element, contentItem) {
        // set dialog width to 1200px
        $('div[class~="msls-dialog-frame"]').css('maxWidth', '1200px');
        // set dialog height to 800px
        $('div[class~="msls-dialog-inner-frame"]').css('height', '800px');
        // move the dialog up (it moves up and then down again??)
        setTimeout(function () {
            $('div[class~="msls-dialog-frame"]').css('margin-top', '10px');
        });
    };

    Setting the margin-top above needs to be set inside the timeout() function otherwise it has no effect, but for some reason it moves up as required, but then immediately moves down again.

    Does anyone know how to keep it up higher?

    Thanks in advance


    Regards, Xander. My Blog

    Wednesday, April 23, 2014 2:15 AM

Answers

  • I was only partly joking with my post.  I actually propose you add a custom class to the user-customization.css:

    .Viagra {
         margin-top: 10px !important;
    }

    Then, in the post-render code for the dialog top-level control:

    $('.msls-dialog-frame').addClass('Viagra');
    This works to keep it up in a little test I tried.  (You should suspect that by having the dialog initially up, then down, that your in-line style is subsequently being cascaded, despite the fact that in-line styles ought to have the highest specificity.)

    • Marked as answer by novascape Wednesday, April 23, 2014 3:24 AM
    Wednesday, April 23, 2014 3:21 AM

All replies


  • Does anyone know how to keep it up higher?

    Thanks in advance



    $('div[class~="msls-dialog-frame"]').css('margin-top', '10px').addClass('Viagra');
        


    Wednesday, April 23, 2014 2:53 AM
  • That class would do wonders for other areas in LS too LOL

    Regards, Xander. My Blog

    Wednesday, April 23, 2014 2:55 AM
  • I was only partly joking with my post.  I actually propose you add a custom class to the user-customization.css:

    .Viagra {
         margin-top: 10px !important;
    }

    Then, in the post-render code for the dialog top-level control:

    $('.msls-dialog-frame').addClass('Viagra');
    This works to keep it up in a little test I tried.  (You should suspect that by having the dialog initially up, then down, that your in-line style is subsequently being cascaded, despite the fact that in-line styles ought to have the highest specificity.)

    • Marked as answer by novascape Wednesday, April 23, 2014 3:24 AM
    Wednesday, April 23, 2014 3:21 AM
  • Thanks Allen, that works a treat.

    After adding the above CSS to the user-customization.css file, the working code then becomes:

    myapp.MyLargePicker.SomeGroupControl_postRender = function (element, contentItem) {
        // set dialog width to 1200px
        $('div[class~="msls-dialog-frame"]').css('maxWidth', '1200px');
        // set dialog height to 800px
        $('div[class~="msls-dialog-inner-frame"]').css('height', '800px');
        // move the dialog up
        $('.msls-dialog-frame').addClass('Viagra');
    };
    Thanks again for your help.


    Regards, Xander. My Blog

    Wednesday, April 23, 2014 3:26 AM