Dropdown within card that is a fully clickable and opens a modal - html

I'm having issues with getting my dropdown to work when it's inside a fully clickable card.
Basically what's happening is that I can't click the three dots with the dropdown without it opening the modal. I'm not sure how to separate the two.
I still want the card to be fully clickable but also have the dropdown when I click on the three dots.
My code
<div class="card card-container">
<div class="card-body">
<img class="mr-4" src="images/icon.png" width="30px" height="30px" >
Contact_name
<span class="d-inline float-right">
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img src="images/ellipsis.png" width="30px" height="30px">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li data-toggle="modal" data-target="#editContact" role="presentation"><a class="ml-3" role="menuitem" tabindex="-1" href="#">Edit</a></li>
<li data-toggle="modal" data-target="#deleteContact" role="presentation"><a class="ml-3" style="color: red;" role="menuitem" tabindex="-1" href="#">Delete</a></li>
</ul>
</div>
</span>
</div>
</div>
Fully clickable card:
Modal being displayed:
Dropdown on the card:

I review your code, the problem is that if the card is completely clickable you need to set a style property that indicates that a specific element is on top of the clickable card, in this case z-index property will do the job.
Try the following code:
I added z-index:99 to the dropdown <span> element.
<div class="card card-container">
<div class="card-body">
<img class="mr-4" src="images/icon.png" width="30px" height="30px" />
Contact_name
<!-- Dropdown element -->
<span class="d-inline float-right" style="z-index:99">
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img src="images/ellipsis.png" width="30px" height="30px">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li data-toggle="modal" data-target="#editContact" role="presentation"><a class="ml-3" role="menuitem" tabindex="-1" href="#">Edit</a></li>
<li data-toggle="modal" data-target="#deleteContact" role="presentation"><a class="ml-3" style="color: red;" role="menuitem" tabindex="-1" href="#">Delete</a></li>
</ul>
</div>
</span>
<!-- End of dropdown element -->
</div>
</div>
Definition and Usage: the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Related

Display two div's side by side inside <li></li> element

How can I get the two div's inside the list element (part of an ordered list) to display side by side?
The div's in question are with class="dd-handle"and class="btn-group".
I'm using Bootstrap v3.3.4 and Nestable2.js
I've tried the following. In this case, the btn-group displays below the first div.
<li class="dd-item" data-id="id">
<div class="dd-handle">Section name</div>
<div class="btn-group">
<a data-toggle="dropdown" class="dropdown-toggle" role="button">
<span class="icon icon-dots-three-horizontal"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name">
<span></span>
Rename
</a>
</li>
<li>
<a href="#myOtherModal" data-toggle="modal">
<span></span>
Add New
</a>
</li>
</ul>
</div>
</li>
In this case, the layout and functionality of the Nestable2.js library are completely off.
<li class="dd-item" style="display:flex; flex-direction:row; justify-content: space-around;" data-id="id">
<div class="dd-handle" style="display:flex; flex-direction:column;">Section name</div>
<div class="btn-group" style="display:flex; flex-direction:column;">
<a data-toggle="dropdown" class="dropdown-toggle" role="button">
<span class="icon icon-dots-three-horizontal"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name">
<span></span>
Rename
</a>
</li>
<li>
<a href="#myOtherModal" data-toggle="modal">
<span></span>
Add New
</a>
</li>
</ul>
</div>
</li>
Try adding style="display: inline" or display: inline-block;, as blocks have a linebreak built into them by default, and this removes that break.

Create a nested Bootstrap dropdown toggle

This is my first question to StackOverflow, so I'm sorry if it's a little wonky.
Anyway, I have a need to use a "back" or "close" link within a Bootstrap dropdown menu. It appears that the dropdown() function only appends the "open" class to the direct parent of the element with the "dropdown-toggle" class.
Anyone have any ideas? Here is my markup:
<li class="navbar__nav-item navbar__nav-dropdown dropdown">
<a class="navbar__nav-link navbar__dropdown-toggle dropdown-toggle" data-toggle="dropdown">News & Events</a>
<ul class="navbar__nav-dropdown-menu dropdown-menu">
<li class="navbar__header-menu-title">
<h6 class="navbar__header-menu-back ">
<a class="navbar__header-menu-back-link dropdown-toggle" data-toggle="dropdown">< Back</a>
</h6>
<h6 class="navbar__menu-title">
Title
</h6>
</li>
<li class="navbar__dropdown-menu-item">
<a class="navbar__dropdown-menu-link" href="component-library.html">Link1</a>
</li>
<li class="navbar__dropdown-menu-item">
<a class="navbar__dropdown-menu-link">Link2</a>
</li>
</ul>

create a dropdown button in a selectable item in a list

I am using jQuery Ui to make list items selectable on my web app.
Inside each item from this list I have a dropdown button.
When I'm adding the selectable option to the list, the dropdown options doesn't open since the item (the button's parent) is being selected, and the button is not clickable anymore, as if the selectable option "hides" the clickability of the button.
How can i fix it?
My code looks like this:
<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
<div type="button" class="dropdown " >
<a class="dropdown-toggle " id="dLabel" role="button" data-toggle= "dropdown" data-target="#" ng-href="/page.html">aaa
</a>
<ul class=" dropdown-menu " role="menu" >
<li > ng-href="#" >blabla1</a></li>
<li > ng-href="#" >blabla2</a></li>
<li > ng-href="#" >blabla3</a></li>
</ul>
</div>
</li>
First you code is missing a few parts. See comments below.
I took what you had and cleaned it up:
<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
<div type="button" class="dropdown "> <a class="dropdown-toggle " id="dLabel" role="button" data-toggle="dropdown" data-target="#" ng-href="/page.html">aaa
</a>
<ul class=" dropdown-menu " role="menu">
<!-- You were missing the <a in front of each ng-href -->
<li> <a ng-href="#">blabla1</a>
</li>
<li> <a ng-href="#">blabla2</a>
</li>
<li> <a ng-href="#">blabla3</a>
</li>
</ul>
</div>
</li>
<!-- You were missing a closing ul -->
</ul>
and you can view it working here on js fiddle
I added the following to resources and it worked ok for me:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

Aligning bootstrap dropdown with text

I created a Bootstrap dropdown using this code:
<div class="dropdown" style="margin-bottom: 20px;">Ordered by
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="primary">Random</span></a>
<ul class="dropdown-menu" role="menu">
<li>Random</li>
<li>Earliest</li>
<li>Latest</li>
</ul>
post.
</div>
But as you can see, the dropdown isn't aligned with the link:
How can I get it to align, and if possible, also display the white triangle on top pointing to the link?
JSFiddle example
Is this what you are looking for?
http://jsfiddle.net/t75g5/
<span>Ordered by<span>
<div class="dropdown mydropdown" style="margin-bottom: 20px;">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><span class="primary">Random <b class="caret"></b></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Random
</li>
<li>Earliest
</li>
<li>Latest
</li>
</ul>post.</div>

btn-group with submenu twitterbootstrap

I'd like to know how can i build a btn-group with a sub-menu.
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
and i' like to put this in the btn-group:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
This is what i want: (but with twiiter-bootstrap)
Explanation: Basically this btn could go anywhere, I just put it in a button group to show there is nothing special about this button.
So first, you want to add data-toggle= dropdown to your button. Then, you need to add your standard drop down menu to the button. I guess the key here is knowing that there is nothing stopping you from adding a second dropdown menu into a submenu.
So go a head an add a submenu into whatever < li > you want, and inside that, just another dropdown-menu. So essentially we have Button -> dropdown menu -> dropdown submenu -> dropdown menu -> sub elements. Alittle confusing but pretty straight forward I think
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<!--start of dropdown button -->
<button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
</ul>
</li>
</ul>
</div>
<!--end of dropdown button -->
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>
Edit:
After playing with this alittle, I realized that you do need the
<div class="btn-group">
wrapping the button, even if it is going to just stand alone. I created this updated fiddle to demo it.
http://jsfiddle.net/jamiematthews/yWrRA/1/
Took a bit of experimenting but here's how you go about doing it:
http://jsfiddle.net/ewQTE/2/
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Left <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropwn Link #1</li>
<li>Dropwn Link #2</li>
</ul>
</div>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>