引導下拉按鈕中的名片

我使用hovercard顯示用戶的小的外形卡。在這個hovercard中，我試圖包含一個Twitter Bootstrap下拉按鈕。引導下拉按鈕中的名片

按鈕被包含在HTML和CSS的工作正常（與實際JavaScript來打開下拉一起）。問題是無法看到下拉菜單。

看看一個更好的解釋圖像： example problem

第二個例子是名片默認結果。正如你所看到的，下拉菜單的一小部分正在顯示，但由於某些原因，它正被隱藏卡片框的邊界所隱藏。

在第1例中，我刪除默認的引導CSS位置選項，下拉繼承的靜態位置。使用靜態時，可以看到菜單，但它增加了懸停卡盒的大小。

我需要發生的事情是，當胡蘿蔔被點擊時，下拉框/列表打開懸停卡的「頂部」，不擴展懸停卡的尺寸，而是讓下拉菜單作爲自己的對象尺寸。

順便說一句 - 我已經檢查兩個z指數的名片中的，並且下拉，並且下拉的Z-指數越高，這樣不應該成爲問題。

編輯：實際示例標記

<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>

來源

2012-07-30 w00tw00t111

嘗試使用'.dropup'類'.pull-right'組合（[見DOC]（http://twitter.github.com/bootstrap/components.html#buttonDropdowns））。或者你可以嘗試導出vcard外的菜單。提供一些生成的html來獲得工作示例。 – Sherbrow 2012-07-30 18:52:20

Sherbrow，我嘗試了dropup並拉右，但不幸的是發生了同樣的問題（除了這個時候，懸停卡框邊界切斷了列表），它在頂部邊界而不是底部切斷它。我已經使用生成的實際代碼更新了我的帖子。 – w00tw00t111 2012-07-30 19:29:44

爲'.btn-group'設置'position：absolute;'。 – Oleg 2012-08-08 14:17:41

這似乎是一個overflow: hidden問題。

你應該嘗試應用樣式overflow: visible到下拉菜單的父樹。它可能在<div style="float:right; display:block;">左右。

來源

2012-07-30 21:44:16 Sherbrow

Sherbrow，謝謝你的評論。我已經嘗試添加overflow：對dom樹中ul組的每個不同父級都可見，並且他們都沒有導致能夠查看下拉菜單。我可以確切地看到你的思路是什麼！ ul下拉列表正被隱藏在hovercard中，實際上它應該位於hovercard的「上方」並且只要需要就可以展開。儘管如此，我無法弄清楚如何將它從「懸浮」中取出。 – w00tw00t111 2012-08-24 13:14:02

引導下拉按鈕中的名片

回答

相關問題