Как мне предотвратить установку android keyboard pu sh моего контейнера? - PullRequest
Новая
       48

Как мне предотвратить установку android keyboard pu sh моего контейнера?

0 голосов
/ 06 августа 2020

Итак, я делаю веб-сайт с «модальным всплывающим окном» формой входа, отвечающим сначала мобильным устройствам, и у меня есть нижний колонтитул до конца модального контейнера. Проблема в том, что когда я хочу что-то записать на обоих входах, появляется клавиатура и sh нижний колонтитул вверх. Я хочу, чтобы нижний колонтитул оставался на месте, а клавиатура просто не изменяла размер моего модального контейнера и не взаимодействовала с веб-сайтом.

Вот как это выглядит без отображения клавиатуры

А это когда sh нижний колонтитул вверх.

Вот код. 

* {
    margin:0;
    padding:0;
}

header{
    background-color:red;
    width:100%;
    height:30px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.to-modal-container{
    background-color:blue;
    width:100%;
    height:200px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.to-modal{
    background:red;
}

.bg-modal{
    width: 100%;
    height:100%;
    background-color:rgba(0, 0, 0, .5);
    position:absolute;
    top: 0;
    display:flex;
    justify-content: center;
    align-items: center;
}

.modal-content{
    width:90%;
    height:50%;
    background-color: white;
    border-radius: 4px;
    text-align: center;
    padding-top: 20px;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
}

input {
    width:50%;
    display: block;
    margin:15px auto;
}
<!DOCTYPE html>
<html>
<head>
    <title>MODAL TESTING</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<header>
    <div>
        <span>LOGO</span>
    </div>
</header>
<div class="to-modal-container">
    <div class="to-modal">
        <span><a href="#">CLICK AQUI</a></span>
    </div>
</div>
<div class="bg-modal">
    <div class="modal-content">
        <span>LOGO</span>
        <div class="form-container">
        <form action="">
            <input type="text" placeholder="Name">
            <input type="Password" placeholder="Password">
            <a href="" class="button">Submit</a>
        </form>
        </div>
        <div class="footer-container">
            <span>THIS IS THE FOOTER</span>
        </div>
    </div>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 06 августа 2020

Я поигрался с кодом, которым вы поделились, и заметил, что вы установили высоту modal-content на 90%.

Таким образом, он повторно регулирует высоту вашего модального окна до 90% экрана доступная высота, которая изменяется при открытой клавиатуре.

Поэтому я рекомендую установить фиксированную высоту, например 300px вместо%, и иметь другую высоту для мобильных устройств, использующих медиа-запросы. 

.modal-content{
    width:90%;
    /* height:50%; */
    height: 300px;
    background-color: white;
    border-radius: 4px;
    text-align: center;
    padding-top: 20px;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
}

Дайте мне знать, если вам понадобятся дополнительные разъяснения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...