I have body and HTML with height: 100% because of vertical-align stuff for container (center container). my problem I have form here and when I focus textbox in form normally browser force page to top and I'm ok with this. the point is why my background become incomplete and defective when the keyboard pops up in mobile??

<div class="container d-flex h-100 justify-content-center align-items-center">
    <div class="row justify-content-center" id="Level-1">
        <div class="col-12">
            <div class="row flex-column justify-content-center align-items-center">
                <div class="col-auto">
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                </div>
                <div class="w-100"></div>
                <div class="col-lg-8">
                    <div class="row justify-content-center">
                        <form>
                            <div class="form-group d-flex justify-content-center">
                                <input type="tel" class="form-control rounded stroke text-center" id="inputEmail3" placeholder="phone number">
                            </div>
                            <div class="form-group d-flex justify-content-center">
                                <button onclick="" type="submit" class="btn btn-block rounded buttonStyle " id="SendPhone">SEND</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

and this is my style:

html{
  height: 100%;
  background: #1c7430;
}

body{
  height: 100%;
  background: url("../images/BG-web.jpg") center/cover no-repeat;
}
.rounded{
  border-radius: 20px !important;
}
.stroke{
  border: 2px solid #1c7430;
}
.buttonStyle{
  background-color: $orange_color;
}
.buttonStyle:disabled{
  background-color: $disabled_color;
}
.vertical-center {
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

1 Answers

0
Hari Krishnan Rajagopal HRK On

The reason is when the keyboard pops up the viewport of the device shrinks and the image gets adjusted to the reduced height. The solution is to make sure your div items always ensures a 100% of height.

Consider making

html,body{
   height:100%;
}
.container{
   min-height:100%;
}

Instead of setting your background inside the body consider making an extra div with class .background, set it's position to relative and height 100%

.background{
    position:relative;
    background:url("yourimage") cover no-repeat;
    height:100%;

} 

set the form contents inside a div with class .form-contents and set position absolute

.form-contents{
    position:absolute;
}