how use scroll with simpleModal plugin

Question

I'm using simpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ when the text in the dialog is too long, I try to scroll, but the entire page is scrolling, even when using modal:true.

so I can't see the end of the dialog , I try define maxHeight - but seem with no effect.

any idea?

code:

 function loadDialog(Code,vrsnNum)
 {
  vrsnNum=vrsnNum-1;
  $.get(
   "/ajaxVerision.asp", 
   {Code: Code,VerisionNum: vrsnNum},
    function(data)
     {
     $(".CrnrPager").html(data);
     }
    );

  $.get(
   "/ajaxVerisionNext.asp", 
   {Code: Code,VerisionNum: vrsnNum},
    function(data)
      {
      $("#sp1").html(data);
      }
   );

  $('#basic-modal-content').modal({maxHeight: 400,autoPosition : true, position: ['20%','25%']});
 }

score 6 · Accepted Answer · answered Jan 20 '11 at 12:50

6

You could try to assign some CSS to the modal() call, something like this:

$('#basic-modal-content').modal({
    maxHeight: 400,
    autoPosition: true,
    containerCss: {
        'maxHeight' : '400px',
        'overflow' : 'auto'
    },
    position: ['20%', '25%']
});

In addition you also have the dataCss property available.

answered Jan 20 '11 at 12:50

polarblau

17,649
7
63
84

I added "width:490px; overflow-x:hidden; _height:400px; max-height: 400px; overflow-y:auto;" to the data-div style and that correct the problem, thanks for the idea. – Gooloosh Jan 22 '11 at 19:19

Simon_Weaver · Answer 2 · 2016-03-17T03:59:26.363

It's pretty safe now to use calc in css so this is what I'm doing

$('#confirmDialog').modal(
{
    dataCss: 
    {
          'maxHeight': 'calc(100vh - 10em)',   // spaces are needed
          'overflow': 'auto'
    }
 });

This says leave at least 10em (5em either side) above and below the dialog. Fortunately even if you resize the window this all adjusts nicely.

I'm using the calc function with 100vh - 10em which means take the viewport height and subtract 1em. You can't use 100% here because this is a nested element. Unfortunately on iOS 100vh includes the space that is obscured by Safari's icon bar so I had to make the amount subtracted 10em to ensure it is always visibile.

Note: I'm using the dataCss which adds style attributes to the content and not the wrapper. This means if you have a border that the border will be fixed and the content scroll nicely inside it.

Read this for a better understanding of vh on iOS: https://github.com/scottjehl/Device-Bugs/issues/36

how use scroll with simpleModal plugin

2 Answers2