0

ホバーカードを使用して、ユーザーの小さなプロファイル カードを表示しています。このホバーカード内に、Twitter Bootstrap ドロップダウン ボタンを含めようとしています。

ボタンはhtmlに含まれており、cssは正常に機能しています(ドロップダウンを開くための実際のjavascriptとともに)。問題は、ドロップダウンのメニューが表示されないことです。

より良い説明については、画像を見てください。 例題

2 番目の例のホバーカードはデフォルトの結果です。ご覧のとおり、ドロップダウン メニューのごく一部が表示されていますが、何らかの理由でホバーカード ボックスの境界によって隠されています。

最初の例では、デフォルトのブートストラップ css 位置オプションを削除し、ドロップダウンは static の位置を継承しています。static を使用すると、メニューが表示されますが、ホバーカード ボックスのサイズが大きくなります。

私が起こる必要があるのは、ニンジンがクリックされたときに、ホバーカードの「上」でドロップダウンボックス/リストを開き、ホバーカードの寸法を展開せずに、ドロップダウンを独自の寸法を持つ独自のオブジェクトとして機能させることです。

余談ですが、ホバーカードとドロップダウンの両方の z-index を確認しましたが、ドロップダウンの z-index の方が高いため、問題になることはありません。

編集: 実際のマークアップ例

<div class="hc-preview" style="z-index: 0; "><a class="profilecard hc-name" rel="hovercard" data-type="custom" data-width="370" data-url="/omega/ajaxProfile/ProfileCard?eid=1" href="/omega/profile/profile/view/id/1" style="z-index: 0; "><img class="avatar thumb" src="/omega/images/1_darth-maul.png" alt="Avatar"></a><div class="hc-details" style="width: 370px; background-color: rgb(255, 255, 255); display: none; background-position: initial initial; background-repeat: initial initial; "><div class="s-card s-card-pad"><link rel="stylesheet" type="text/css" href="/omega/assets/5583cf06/css/bootstrap-yii.css">


<div class="hovercard">

<img class="thumb align-left" src="/omega/images/1_darth-maul.png" alt="Paul Johesphat"><h1>
Paul Johesphat<span class="badge badge-success" rel="tooltip" data-original-title="This person is an expert in our community">Expert</span></h1>
<h2>Advisor</h2>

<h2>
</h2>

<div class="clearfix"></div>
<div style="float:right; display:block;">

<div id="loading"></div>



<div id="connect-button1">
<div class="btn-group open">
  <button class="btn"><i class="icon-ok"></i> Friend</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
            <li>
            <span class="instruct">Add to List:</span>
            </li>
            <li class="divider"></li>

<div id="list">
<li>
<a href="#" id="yt0">Acquaintance</a></li>

<li>
<a href="#" id="yt1">Close Friend</a></li>

<li>
<a href="#" id="yt2">Colleague</a></li>

<li>
<a href="#" id="yt3">Prospect</a></li>

</div>
        <li class="divider"></li>
        <li><a id="1" class="remove" href="/omega/friendship/friendship/removerequest">Remove Connection Request</a></li>
  </ul>
</div></div></div></div></div></div></div>
4

1 に答える 1

0

これはoverflow: hidden問題のようです。

overflow: visibleドロップダウン メニューの親ツリーにスタイルを適用してみてください。あたりかもしれません<div style="float:right; display:block;">。

于 2012-07-30T21:44:16.173 に答える