Как исправить веб-компонент, чтобы получить полосы прокрутки? - PullRequest
0 голосов
/ 02 мая 2019

Итак, я пытаюсь создать веб-компонент my-thing , который можно разместить в любом месте html.Но у меня проблемы с получением полос прокрутки для работы.

С учетом этого примера ( ссылка на кодовый блок ) и без изменения содержимого, помеченного как «невозможно изменить», как мне отобразить полосы прокрутки?

<html>
<body>
    <style>
        .my-thing {
            white-space: pre;
            overflow: auto;
            border: 1px red solid;
            /*width:100%;*/
        }
    </style>

    <br />
    <div style="display:flex"> <!-- can't change -->
        <div>                  <!-- can't change -->
            <div class="my-thing">
        This has NO scrollbars!!
        This is a loooooooong and boring piece of text that really doesn't deserve to be read at all.
        This is another loooooooong and boring piece of text that really doesn't deserve to be read at all.
            </div>
        </div>
    </div>

    <br />
    <div class="my-thing">
        This auto scrolls correctly.
        This is a loooooooong and boring piece of text that really doesn't deserve to be read at all.
        This is another loooooooong and boring piece of text that really doesn't deserve to be read at all.
    </div>

</body>
</html>

Редактировать : Также вы не можете вручную изменить ширину моей вещи.В идеале мы хотим "ширина: 100%".

1 Ответ

0 голосов
/ 02 мая 2019

Вы можете просто установить ширину и высоту класса my-thing в любое значение.установите ширину компонента, чтобы появилась горизонтальная полоса прокрутки, и высоту, чтобы появилась вертикальная полоса прокрутки

 .my-thing { white-space: pre; overflow: auto; border: 1px red solid; width: 100px; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...