Monca+Ionicでアプリを制作しています。
利用規約のような画面を作成したいと考えていまして
preタグ内に文章を入れてpreタグの領域を超える場合はスクロールさせたいです。
以下のようなソースを記述しました。
Androidでは正常にスクロールされるのですが
iOSではスクロールされません。
こちらの記事にposition:absoluteをかけているとスクロールができないとの情報がありました。
https://qiita.com/YukieKasai/items/2bd8b585802116c8be66
ion-contentがposition:absoluteを使っているのでこれが原因と考えられるのですが
ion-content要素は外せないです。。。
何か良い方法はないでしょうか。preタグにはこだわりはありません。
html
1<ion-content no-bounce> 2<div class="slider-container"> 3<div class="slider-page"> 4 <h3>利用規約</h3> 5 <pre class="slider-pre">規約文がはいります</pre> 6 <!--同意しない--> 7 <input type="button" class="button btn-color05" value="同意しない" ng-click="Disagree();"> 8 <!--同意する--> 9 <input type="button" class="button btn-color01" value="同意する" ng-click="Agree();"> 10</div> 11</div> 12</ion-content>
CSS
1.slider-container{ 2 width:95%; 3 height: 80%; 4 text-align: -webkit-center; 5 margin-top: 10px; 6 background: #ffffff; 7 box-shadow: 0 0 8px gray; 8 border-radius: 10px 10px 10px 10px; 9} 10.slider-page h3{ 11 margin: 10px; 12} 13.slider-pre{ 14 width: 98%; 15 height:300px; 16 font-size:17px; 17 padding-left:5px; 18 padding-right:5px; 19 text-align: left; 20 border:1px solid #c7c7c7; 21 -webkit-overflow-scrolling: touch; 22 overflow-y: scroll; 23}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。