Databases
StackOverflow2013
Postsdbo
POBootstrap Dropdown Button within HoverCard
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap Dropdown Button within HoverCard
    text
    copied!<p>I'm using <a href="http://designwithpc.com/Plugins/Hovercard/" rel="nofollow noreferrer">hovercard</a> to display a small profile card of a user. Within this hovercard I am attempting to include a Twitter Bootstrap dropdown button.</p> <p>The button is being included in the html and the css is working fine (along with the actual javascript to open the dropdown). The problem is that the dropdown's menu cannot be seen.</p> <p>Take a look at the image for a better explanation: <img src="https://i.stack.imgur.com/ylHHQ.jpg" alt="example problem"></p> <p>The 2nd example hovercard is the default result. As you can see, a small portion of the dropdown menu is being shown, but for some reason it is being hidden by the bounds of the hovercard box.</p> <p>In the 1st example, I've removed the default bootstrap css position option and the dropdown inherits a position of static. When static is used, the menu can be seen but it increases the size of the hovercard box.</p> <p>What I need to have happen, is when the carrot is clicked have the dropdown box/list open "on top" of the hovercard and not expand the hovercard's dimensions but instead have the dropdown act as it's own object with its own dimensions.</p> <p>As an aside - I have checked both z-index's of the hovercard and the dropdown and the dropdown's z-index is higher so that should not be the issue.</p> <p>EDIT: Actual example markup</p> <pre><code>&lt;div class="hc-preview" style="z-index: 0; "&gt;&lt;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; "&gt;&lt;img class="avatar thumb" src="/omega/images/1_darth-maul.png" alt="Avatar"&gt;&lt;/a&gt;&lt;div class="hc-details" style="width: 370px; background-color: rgb(255, 255, 255); display: none; background-position: initial initial; background-repeat: initial initial; "&gt;&lt;div class="s-card s-card-pad"&gt;&lt;link rel="stylesheet" type="text/css" href="/omega/assets/5583cf06/css/bootstrap-yii.css"&gt; &lt;div class="hovercard"&gt; &lt;img class="thumb align-left" src="/omega/images/1_darth-maul.png" alt="Paul Johesphat"&gt;&lt;h1&gt; Paul Johesphat&lt;span class="badge badge-success" rel="tooltip" data-original-title="This person is an expert in our community"&gt;Expert&lt;/span&gt;&lt;/h1&gt; &lt;h2&gt;Advisor&lt;/h2&gt; &lt;h2&gt; &lt;/h2&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;div style="float:right; display:block;"&gt; &lt;div id="loading"&gt;&lt;/div&gt; &lt;div id="connect-button1"&gt; &lt;div class="btn-group open"&gt; &lt;button class="btn"&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Friend&lt;/button&gt; &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt; &lt;span class="caret"&gt;&lt;/span&gt; &lt;/button&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt; &lt;span class="instruct"&gt;Add to List:&lt;/span&gt; &lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;div id="list"&gt; &lt;li&gt; &lt;a href="#" id="yt0"&gt;Acquaintance&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#" id="yt1"&gt;Close Friend&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#" id="yt2"&gt;Colleague&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#" id="yt3"&gt;Prospect&lt;/a&gt;&lt;/li&gt; &lt;/div&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="1" class="remove" href="/omega/friendship/friendship/removerequest"&gt;Remove Connection Request&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload