2017-08-07 12 views
18

私はウェブサイト上でbootstrap datepickerを使用していますが、その親に固定位置を与えることでスタイル付けされています。正常に動作しますが、IpadとIphoneでテストします)、私は下にスクロールし、それを開くために、日付ピッカーに触れるしようとすると、それはページの上部にスクロール、どのように私はこの問題を解決することができますか?私はカスタムドロップダウン私は問題hereの簡単なダウンにストライプバージョンを作成しましたSelectricブーツストラップ日付のスティッキー問題

を使用していたときに

同様の問題が発生します。問題はエミュレータではなく、実際のモバイルデバイスまたはipadで複製されることに注意してください。

+0

そのおそらくあなたの '日付ピッカー-parent'スタイル'ポジションがあるので:fixed'を。私はあなたがそれなしで働くことができるはずだと思います。 – Nisarg

+0

しかし、私はそれが上に粘着したい。 – UmeRonaldo

+0

問題を説明していただけますか?私はipadでチェックしましたが、あなたの問題を理解していませんでした。 – anu

答えて

0

この問題は、特定の環境に関係のない発見された

.dropdown-menu{ 
position: fixed!important 
} 
+0

私のために働いていません – UmeRonaldo

0

この(ないのiOSのみ)を試してみて、次のように解決策を持っています

あなたはDatePickerのdivのクラスセットが隠されてから実際に日付ピッカーかを調べる必要があります表示可能(showとhideのイベントが成功したときに変更されます)。今、スクロールが所定の位置にとどまるべき

body.modal-open { 
    overflow: visible; 
} 

は、そのクラス(ここではモーダル-オープン)欠落しているshowコマンドのためにあなたのCSSに追加します。

<body> 
     <div class="modal-open"> 
      Datepicker 
     </div> 
</body> 

出典:

Bootstrap modal: background jumps to top on toggle

PS

例は次のようにHTMLに言及します。これはあまりにもハッキリと思われる場合、私のソースには18のオプションがあります。

私はこれを現在1回作っており、魅力的に働いていましたし、それほどトリッキーではありませんでした。

+0

datepickerが開くときにボディに添付されたクラスはありません。bodyの最後にhtmlのセットを追加し、bodyにスタイルを変更しません。 – UmeRonaldo

0

これをinspect要素で表示すると、位置がabsoluteの別のdivが作成され、位置がstickyに変更されるだけで、なぜ画像に表示されるのかがわかります。あなたがGHレポの問題を通して見えてきた、

.dropdown-menu { 
    position: sticky; 
} 

希望スタートとしてあなたに

+0

今は試しましたが問題は解決しませんでしたが、親のdatepicker-parentでも試しました。両方の新しいテストはtest2.htmlとtest3.htmlという名前でアップロードされます – UmeRonaldo

+0

私にそれを確認させてください –

+0

あなたのtest2はうまくいきました。今すぐスティッキーをチェックしてください。 –

-1

を助ける:

enter image description here

あなたは、CSSのコード行を追加することでこれを行ってすることができますあなたの説明にマッチした何か?

このリンクは、特に有望な音:

私が何を発生するかもしれませんが、あなたの日付ピッカーが固定された「として、本体ではなく、あなたが設定されている親の絶対に設定されていることだと思います"

クリックして日付ピッカーを開くと、モバイルデバイスはアクティブな要素にスクロールしています(この場合、上部の日付ピッカーは親の絶対に設定されています)。

また、スクロールに関連するいくつかのデフォルトのモバイル行動があるように思われる:

をおそらく以下のように設定するのに役立ちます:

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */ 

を次のリンクは、より多くのコンテキストを提供このスクロール動作の場合:

+0

@Baum mit Augen - ありがとう、私は私の答えを改善しようとしました。より多くのことが必要な場合は教えてください。 – prufrofro