CODEWITHSUNDEEP
javascriptcss
art
art

Reputation: 306

form hides as the onscreen keyboard appears in mobile

Here is the jsfiddle link https://jsfiddle.net/109qve4t/

Here is the code for a mobile website design.The problem here i face is that my form remains static on the window.But what i want is tha the form should jump to the top of the window as the user writes his query in the "Enter your starting" city text box.I dont want to use jquery to accomplish it.

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
    img.bg {
        min-height: 100%;
        min-width: 1024px;

        width: 100%;
        height: auto;

        position: fixed;
        top: 0;
        left: 0;
    }

    @media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
        #form_1 {
            width: 20%;
        }
    }

    #form_1 {     
        position: relative;
        border-radius: 15px;

        width: 80%;
        margin: 15% auto; 
        padding: 20px;
        background: white;
        -moz-box-shadow: 0 0 20px black;
        -webkit-box-shadow: 0 0 20px black; 
        box-shadow: 0 0 20px black;
        display: table;
        border :solid 2px  black;
        padding: 15px;
    }

    .row {
        display:table-row;
    }

    .row label {
        text-align: right;
    }
</style>
</head>
<body>

<div id="yt" >
    <img src="bg.jpg" class="bg">
    <form id="form_1" tabindex="0">
    <label>Enter Starting City</label>
    <div class="row">
    <input type="text" name="s_city"></br>
</div>
<div class="row">
    <label>Wait While The Cities Appear
    </label></br>
    <textarea rows="10" cols="30"></textarea></br>
    <div class="row">
</form>
</div>

</body>
</html>

Upvotes: 0

Views: 43

Answers (1)

pawel-kuznik
pawel-kuznik

Reputation: 456

I don't think that you can do that without jquery or other javascript. Mostly cause you have to detect focus/blur on a child element (the input) and then modify the parent (form). CSS rules don't have the ability to change parent behaviour.

Some kind of user action is required. A solution using jQuery would be following:

https://jsfiddle.net/6gbk76fx/4/

$(function () {
    $('form input, form textarea').on("focus", function (event) {
        $(event.target).closest('form').addClass('jump');
    });

  $('form input, form textarea').on("blur", function (event) {
        $(event.target).closest('form').removeClass('jump');
    });
});

Upvotes: 1

Related Questions