1

JqueryMobileでポップオーバーパネルを許可するプラグインに取り組んでいます。

パネルは次のようになります。

<div data-role="panel" data-panel="popover" data-id="my_name">
    // JQM pages
</div>

JQMページのコンテンツセクションの後にあります。

ここのサンプル（バギー）：サンプル

ポップオーバーサンプル

パネルはビューポートまたはpageContainersのように動作します。JQMはデフォルトで、本文をpageContainerとしてのみ使用します。私のプラグインはパネルも許可するので、ポップオーバーを通常のナビゲーションに統合します。

私の問題：
ポップオーバーに三角形を追加しましたが、パネルのCSSオーバーフローを維持する必要があります-x：非表示にして三角形を非表示にします。オーバーフロー：非表示をコメントアウトすると、三角形が表示されますが、ページを変更すると、次のようにパネルが「ブリードアウト」します。

三角形は表示されますが、パネルがにじんでいます

コンテンツセクションがスクロールバーを決定するので、オーバーフローをシャッフルしてみました：隠し、ポップオーバー内のページにも設定しましたが、何も機能しません。パネルの外側に三角形を移動したくないので、次のようにします。

質問：
overflow：hiddenを使用して親の外部に子要素を表示する方法はありますか、またはoverflow-x：hiddenを設定すると、上/下（xよりy以上）にある三角形が非表示になるのはなぜですか？

いくつかのアイデアや他の回避策を探しているだけです。

手伝ってくれてありがとう！

編集： ここに三角形のCSSがあります：

.popover_triangle { 
    position: absolute;
    line-height: 0%; 
    width: 0px; border-top: 16px solid rgba(0,0,0,0); 
    border-left: 16px solid rgba(0,0,0,0); 
    border-right: 16px solid rgba(0,0,0,0); 
    border-bottom: 16px solid black;  
    }
.ui-triangle-top .popover_triangle { 
    top: -32px;
    }
.ui-triangle-bottom .popover_triangle { 
    bottom: -34px;
    }

ポップオーバーには次のものがあります。

.ui-popover { 
    position:  absolute; 
    z-index:1005 !important; 
    border: 3px solid black;  
    border-radius: 4px; 
    left: auto; 
    }
.popover1 { 
    margin-top: 3.25em; 
    right: 5em;  
    height:25em; 
    width: 15em; 
    top: 0;
    }
4

1 に答える 1

1

いいえ、overflow-x：を非表示にすると、絶対位置でポップオーバーから三角形が突き出るようにすることはできません...さまざまなブラウザでこれを試しました！

あなたがする必要があるのは、ポップオーバー内に別のdivを作成し、適用してオーバーフローすることです-y：そのdivにスクロールまたは自動します。（スクロールバーが垂直であるため、overflow-xではなくoverflow-yを意味している可能性がありますか？）通常のオーバーフローはポップオーバー要素に任せます。オーバーフローを取得するには-y：div内の自動が適切に機能するようにするには、高さを指定する必要があります（例：height：100％）。（ピクセル量を指定できず、100％でポップオーバー内の他の要素用のスペースが作成されない場合は、それを回避する他の方法があります）

例えば：

<div data-role="panel" data-panel="popover" data-id="my_name">
    // JQM pages
    <!-- insert extra DIV here that contains content and hidden overflow -->
</div>
于 2012-06-20T02:43:12.257 に答える