0

I am facing an issue with the max-height applied to a div in bootstrap modal dialog.

Here is the fiddler: https://jsfiddle.net/z4b2bwg6/5/

CSS:

.multiline-validation{max-height:100px;overflow-y:auto;}

Steps to reproduce the issue:

  1. Launch the fiddler in IE 9 and select a record in grid.
  2. Modal dialog will appear.
  3. Click on Continue button.
  4. Bootstrap alert message will appear with the max height enabled (you will see a scrollbar).
  5. Click on the backdrop and then focus on the alert messages.
  6. The alert message div (which has max-height enabled) will expand and shrink automatically.

Question:

I am wondering what is wrong with my code and why the max height is not working. I am seeing the issue in IE 9.

Any suggestion is appreciated.

JGV
  • 5,037
  • 9
  • 50
  • 94
  • Related issue in IE8, you could try the hacky workaround and see how it goes? http://stackoverflow.com/questions/7707/ie8-overflowauto-with-max-height – Hypaethral Jun 17 '15 at 00:50
  • @GrumbleSnatch, thanks for the link. Tried the suggestion in the link you provided but still, no success. – JGV Jun 17 '15 at 00:57
  • Hi Vimalan Jaya Ganesh, When I looked at this in your fiddle it showed the modal was expanded and no scroll. I hit Run and had a view as you said with the scroll. Then had a look at this in IE and used IE9 and IE8 and doing what you said could not see any change. It was odd that when I first viewed it in Chrome and had the two different views. And that was without clicking the back drop. Sorry can't seem to get it to do what you see. – AngularJR Jun 17 '15 at 03:17
  • 1
    **Vimalan**, I just noticed that your css code is missing a **semicolon** after `overflow-y:auto` See if it is just this that is causing the issue you see in IE9. – AngularJR Jun 17 '15 at 03:43
  • @AngularJR, thanks for catching the missing semicolon. Even after adding that, I am seeing the same behavior. – JGV Jun 17 '15 at 06:28

1 Answers1

0

Check that you page runs in standards mode.. (make sure there is a valid doctype).

<!doctype html>

Also, if IE is in compatibility mode, that can cause problems. Try added the following to you :

<!-- Forces user OUT of IE's compatibility mode and removes "broken page" icon --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
pregunta
  • 138
  • 1
  • 11