6

iPad とデスクトップ ブラウザの両方で動作するはずの Web アプリを作成しています。

ポップアップが横から来るフィルターセクションがあります（ポップアップはフィルター<li>タグに対して絶対に配置されます）：

ここに画像の説明を入力

デスクトップでは見栄えがしますが、横向きモードの iPad では、ビューポートを超えるため、ポップアップの下部がカットされます。

queryUI positionを使用して解決しようとしました:

$('.capbIpadPopupAutoComplete').position({
    "my": "left center" ,      //  Horizontal then vertical, missing values default to center
    "at": "left top",     //  Horizontal then vertical, missing values default to center
    "of": $(this).closest('li'),     //  Element to position against 
    // "offset": "20 30" ,      //  Pixel values for offset, Horizontal then vertical, negative values OK
    "collision": "fit flip" //  What to do in case of 
});

ただし、ポップアップが画面の下部ではなく左側に衝突する場合にのみ機能します。

また、三角形は常に正しいフィルターを指す必要があるため、それに応じて三角形が移動することを確認する必要があります。

JqueryUIの位置を間違って使用していますか? より良い解決策はありますか？

これは非常に単純化されたフィドルです

4

1 に答える 1

3

わかりました。最大の問題は、"flip fit"実際には の有効な値ではないことですcollision。（ として扱われていると思います"flip"。）おそらく（スペースなし）を探している"flipfit"か、単に"fit". また、ポップアップの右側をポップアップの左側に揃える必要がありますli。左側と左側を揃えると、ポップアップが重なってしまい、十分なスペースがないために反転してしまいます。私はあなたのコードを微調整し、よりうまく機能するようにしました (ただし、まだ完全ではありません。微調整する必要があります)。

$('.capbIpadPopupAutoComplete').position({
    "my": "right top" ,      //  Horizontal then vertical, missing values default to center
    "at": "left top",     //  Horizontal then vertical, missing values default to center
    "of": $('.capbStrategicPlan'),     //  Element to position against 
    // "offset": "20 30" ,      //  Pixel values for offset, Horizontal then vertical, negative values OK
    "collision": "fit" //  What to do in case of 
});

$(this)引数で機能していないようだったofので、交換しました。

を設定するrightため、ポップアップの値も設定する必要はありません。両方を設定するとポップアップが圧迫されます。.positionleft

矢印については、別々に配置してみませんか？ポップアップが少し移動する必要がある場合は、矢印が少し重なりますが、矢印が小さく見えるだけです。

于 2013-11-26T16:31:27.483 に答える