клавиатура эмулятора увеличивает поле ввода

Question

Я хотел пояснить, что я ничего не дублирую. Я решил проблему смещения моего поля ввода вверх, когда я активировал клавиатуру в своем эмуляторе (android studio).

Как я решил эту проблему:

if ('ontouchstart' in window) {
$(document).on('focus', 'input', function() {
    $('#hexaDecimalSection').css({
        'position': 'absolute',
        'left': '10px',
        'right': '10px',
        'bottom': '0px',
        'margin-left': '0px',
        'margin-right': '0px',
        'transition': '1s'
    });
}).on('blur', 'input', function() {
    $('#hexaDecimalSection').css({
        'position': 'static',
        'left': '0px',
        'right': '0px',
        'margin-left': '10px',
        'margin-right': '10px',
        'transition': '1s'
    });
  });
}

Однако так оно и естьвыглядит, когда я нажимаю на поле ввода в течение доли секунды (пока не откроется клавиатура)

https://imgur.com/a/tKz4pZ6

Как видите, поле ввода смещается вниз, я так понимаюэто из-за абсолютной позиции и нижней точки, равной 0px, и я попытался решить эту проблему (тем не менее, очень небрежное исправление), используя переход. Я надеялся, что смогу остановить поле ввода от перехода в нижнюю часть, предоставив ему более длительную продолжительность, чем клавиатура, необходимая для всплытия ... Но, к сожалению, это не сработало.

Так что мой вопрос заключается в следующем: Как я могу сделать так, чтобы поле ввода было похоже на следующее изображение, но без смещения поля ввода в нижнюю часть на время, когда должна появиться клавиатура:

https://imgur.com/a/FDkZ3ih

Это моя часть HTML, которую я пытаюсь переключить между абсолютным положением и статическим положением (по умолчанию):

    <section id="hexaDecimalSection">
        <div class="row">
            <div class="col-md-12">
                <input type="text" id="givenHexaDecimal" name="givenHexaDecimal" class="form form-control" placeholder="Voer een hexadecimaal in" required>
            </div>        
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="errorHandler" class="btn btn-danger"></div>
            </div>
        </div>
        <div class="row" id="calculateButton">
            <div class="col-md-12">
                <a class="btn" id="calculate" onclick="gatherDataToCalculateHexaDecimal()">Enter</a>
            </div>
        </div>
    </section>