Search code examples
ace-editor

Ace editor searchbox prev/next buttons height shrank?

When I click ctrl + F in the editor, it shows on the top right corner a searchbox, however, the height of the prev/next buttons seems to be shrunk. I wonder if I have missed anything. Any help will be greatly appreciated. Thanks.

https://jsbin.com/mopoxod/2/edit?html,output

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        div#ed {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="ed"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script>
    <script>
        const ed = document.querySelector('div#ed');
        const editor = ace.edit(ed, {
            mode: "ace/mode/html",
        });
    </script>
</body>
</html>
Solution

  • Problem solved by adding <!DOCTYPE html> at the top of the html.