htmlcssdialogresizenon-modal

can not resize non modal html dialog setting style='resize:both' but works with modal dialogs

Using style='resize:both' on non modal dialogs has no effect. Below is the code to test. Is this the expected behaviour od a bug ?

<!DOCTYPE html>
<html>
    <head>
        <title>resize test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">       
    </head>
    <body>
        <dialog  id='alertDialog' style="resize:both">     
            <div id='out'>You should never see this</div>         
            <hr>
            <button>Ok</button>
        </dialog>
        <script>
            // document.getElementById('alertDialog').showModal(); // <=  can resize
            document.getElementById('alertDialog').show(); // <=  can NOT resize
        </script>

    </body>
</html>
Solution

  • Try this :

        <dialog  id='alertDialog' style='overflow:auto;resize:both;min-height:10px;'>