키보드가 화면을 div 위로 밀어 넣습니다.

나는 코드 백 또는 다른 기본 플러그인을 사용하지 않기 위해 이오닉 3를 사용하여 웹보기에서 다른 기본 응용 프로그램의 일부가 될 웹 사이트를 만듭니다. 내가 요소 위의 Google지도가 포함되어 볼 수있는 형태를 가지고 여기 내 HTML입니다 :키보드가 화면을 div 위로 밀어 넣습니다.

#map_loader { 
    margin:auto; 
    background-color: rgba(0, 0, 0, 0.5); 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    position: absolute; 
    } 

    .scroll-content { 
    top: 38%; 
    position: absolute; 
    margin-top: 32px; 
    }

지금 사용자 일단 자신의 휴대 전화에서 웹 사이트를 열 : 여기

<div style="height: 40%; width: 100%"> 
    <div id="map_loader" *ngIf="showMapLoader"> 
    <div class="sk-wave"> 
     <div class="sk-rect sk-rect1"></div> 
     <div class="sk-rect sk-rect2"></div> 
     <div class="sk-rect sk-rect3"></div> 
     <div class="sk-rect sk-rect4"></div> 
     <div class="sk-rect sk-rect5"></div> 
    </div> 
    </div> 
    <div #mapCanvas style="width: 100%; height: 100%;"></div> 
</div> 
<form (ngSubmit)="submit()" padding> 
    <ion-list> 
...... 
...... 
..... 
    </ion-list> 
</form>

와 나의 CSS입니다 그리고 키보드가 화면 밖으로 이동 (Up)하는 양식을 채우기 시작하면 그런 식으로 유지되고 공백 빈 공간이 양식 아래에 표시됩니다.

내가 제대로하고 있습니까? 그것은 내 CSS 때문에 일어나는 일입니까? 그리고 div가 화면 높이의 특정 비율을 차지하게하는 가장 좋은 방법은 무엇입니까? 나는 ion-grid을 시도했다. 그러나 그것은 그것이이 경우 나를 도울 수 없다고 보인다.

출처

2017-11-11 Morad Edwar

이 버그가 키보드 위의를 리프트, 이온 성에서 그리고 키보드를 닫은 후에 padding-bottom을 제거하지 않습니다. 모바일 키보드에서 JS 이벤트가 있는지 확인하려고했으나 scroll-content 클래스의 고정 padding-bottom을 고정식으로 설정하면 런타임시 변경되지 않습니다.

.scroll-content { 
    padding-bottom: 0 !important; 
}

출처

2017-11-14 04:05:55

예, Ionic grid을 사용하면이 문제를 피할 수 있습니다. 아래 그림과 같이 CSS을 설정해야합니다. 키보드가 표시됩니다 모든 입력에 초점을 맞추고 scroll-content 클래스 padding-bottom을 추가합니다 일단

당신의-page.scss

ion-grid { 
     min-height: 100%; 
    }

출처

2017-11-11 15:37:20 Sampath

그래서 '이온 그리드'에 모든 것을 넣어야합니까? 컨테이너처럼? –

예, 그렇게해야합니다. – Sampath

키보드가 화면을 div 위로 밀어 넣습니다.

답변

관련 문제