How to disable hover on bootstrap 4 dropdown - html

I have a page with a data grid, and in that grid every row has a bootstrap dropdown button/menu in it with actions you can perform against that data row. The problem is, the menu opens on hover, and I want it to be on click only (so the user doesn't accidentally open the menu on the wrong row).
Is there a way via CSS to tell the menus to not do anything on hover? I'd prefer not to use jquery for it, and as I have other dropdowns on the page outside the grid, I'd also like to target the ones in the grid specifically so I don't bung up the others.
Sample cell in ng-repeat row:
<td class="text-center" ng-if="vm.isCustService">
<div class="dropdown drop-down-in-grid">
<button type="button" id="btnCustDetails_{{$index}}"
class="btn btn-success btn-sm dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-fw fa-ellipsis-v fa-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnCustDetails">
<div>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/details/" id="lnkDetails_{{$index}}"><i class="fa fa-fw fa-user"></i> Customer Details</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/addresses/" id="lnkAddresses_{{$index}}"><i class="fa fa-fw fa-address-book-o"></i> Addresses</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/jobs/" id="lnkJobs_{{$index}}"><i class="fa fa-fw fa-calendar-o"></i> Jobs</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/createJob/" id="lnkAddJob_{{$index}}"><i class="fa fa-fw fa-calendar-plus-o"></i> New Job</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/notes/" id="lnkNotes_{{$index}}"><i class="fa fa-fw fa-file-word-o"></i> Notes</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/statements/" id="lnkStatements_{{$index}}"><i class="fa fa-fw fa-money"></i> Statements</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/orderSummary/" id="lnkOrderSummary_{{$index}}"><i class="fa fa-fw fa-tasks"></i> Order Summary</a>
</div>
</div>
</div>
</td>

Delete this style from your css
.dropdown:hover>.dropdown-menu {
display: block;
}

Related

How to get Icons on button

So I have
<a type="button" class="btn mt-2 btn-dark" href="https://www.youtube.com/channel/UCzbk3N8EvWBRUKA7Kcdp5zg" target="_blank"><i class="fab fa-youtube"></i> YouTube</a>
^ Button Works Great. Output: https://cdn.apilol.pics/‍​⁠‍‍‍​‌​​​‍​‍⁠​⁠⁠‍​⁠‌‍‍​‌‍‌⁠⁠ඞඞඞඞඞ
And I have this button:
<a type="button" class="btn mt-2 btn-dark" href="http://ez.apilol.xyz" target="_blank"><i class="fab fa-"></i> E-Z.bio</a>
I can't figure out how to get the icon like the youtube one has. All I know is the thing showing the icon is:
<i class="fab fa-youtube"></i> YouTube</a>
Please help!
<a href=“yoursite.com“><img scr=“yousource.png“></a>
or
<img scr=“yousource.png“ onclick=“open()“>
<script>
function open(){
window.open(“yoursite.com“)
}
</script>

Dropdown menu above portlet

I have a dropdown menu in a row in a portlet.
<div class="col-md-6">
<p class="todo-red todo-inline">Gestionnaire : <span class="bold">Name</span></p>
</div>
<div class="col-md-5">
<span class="bold caption-subject uppercase font-grey-mint">Inactif depuis : 26 J</span>
</div>
<div class="col-md-1">
<div class="btn-group">
<a class="btn btn-sm btn-default todo-add-button" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true" aria-expanded="false"><i class="fas fa-volume-mute" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li><i class="fa fa-pencil" aria-hidden="true"></i> 1 jour </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> 3 jours </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> 15 jours </li>
<li><i class="fa fa-pencil" aria-hidden="true"></i> Définitif </li>
</ul>
</div>
</div>
It's look like that:
dropdown behind the portlet
The dropdown menu is behind the portlet, I need to have it above the portlet.
I tried to z-index with position:absolute but nothing work.
I haven't find any good help on SO.
Have you any ideas about my issue?
Thank you
EDIT: Please find the JSFiddle illustration: https://jsfiddle.net/L5o0jh4k/

Responsive icon menu submenu

I want to design icon menu & click to expand submenu using HTML CSS.
I want to design this
I want show the sub menu next row of the responsive div as shows above image. but the problem is the sub menu appear next line but rest of the parent menu goes under it see the problem from the bellow image
this is the problem
I used bootstrap4 and following html
<div class="icon-bar" id="myGroup">
<a class="btn btn-primary" href="index.html" data-toggle="collapse" role="button" aria-expanded="false">
<i class="menu-icon mdi mdi-television fa-4x"></i>
<br>
<span class="menu-title">Dashboard</span>
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#Authentication" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="menu-icon fa fa-handshake-o fa-4x"></i>
<br>
<span class="menu-title">Authentication</span>
</a>
<div class="collapse" id="Authentication" data-parent="#myGroup">
<div class="card card-body">
<a class="btn btn-primary btnsubmenu" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="fa fa-angle-right fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Groups</span>
</a>
<a class="btn btn-primary btnsubmenu" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="fa fa-angle-right fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Users</span>
</a>
</div>
</div>
<a class="btn btn-primary" href="pages/entity-profile-list.html" role="button" data-toggle="collapse" aria-expanded="false" >
<i class="menu-icon mdi mdi-television fa-4x"></i>
<span class="menu-title">Entity Profile</span>
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#objectProfile" role="button" aria-expanded="false" aria-controls="objectProfile">
<i class="menu-icon fa fa-object-group fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Object Profiles</span>
</a> .......
Can anyone please help me? JSFiddle
this is actually quick and dirty and will not work 100%, but it could give you hint into the right direction. The intention here is to move the anchor elements, or better move the "opening menu" to the right position.
function test(element){
var element = $(element),
elemWidth = element.outerWidth(),
rightSpace = ($('#myGroup').width() - (element.offset().left + element .outerWidth())),
idx = parseFloat(rightSpace / elemWidth).toFixed(0),
moveelem = $(element).nextAll().slice(1,idx);
var objectProfile = $('#objectProfile');
element.after(moveelem);
objectProfile.after()
}
$('#myGroup > .btn.btn-primary').on('click', function(el){
test($(this));
})
here is your enhanced fiddle

Evenly space icons whether they have notification badge or not

There won't be as many as shown in the image below, but this shows it more obviously. I am looking to have a couple of font awesome icons that are overlaid with a bootstrap badge to indicate notifications. The two problems I am having are:
When each of the icons have a notification badge, there is too much spacing between them
When an icon does not have a notification badge, they are no longer evenly spaced as a set of icons.
The html:
<div class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-bell"></i>
<span class="notification-badge badge badge-danger">1</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-calendar-alt"></i>
<span class="notification-badge badge badge-danger">4</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-lg fa-list-alt notification-icon"></i>
{{--<span class="notification-badge badge badge-danger">2</span>--}}
</a>
</div>
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-comment"></i>
{{--<span class="notification-badge badge badge-danger">1</span>--}}
</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-lg fa-envelope notification-icon"></i>
<span class="notification-badge badge badge-danger">2</span>
</a>
</div>
</div>
The CSS:
span.notification-badge {
position: relative;
top: -10px;
right: 10px;
border: $white 1px solid;
}
The rest is out-of-the-box Bootstrap 4.
Try a negative right margin that is the width of the badge, something like:
span.notification-badge {
position: relative;
top: -10px;
right: 10px;
border: $white 1px solid;
margin-right: -18px;
}
Play around with the margin-right and the .nav-item or .nav-link margins to get to where you wanna be.

Limit width on Bootstrap input-group

I'm struggling with a problem for several days now and I couldn't find a solution yet, even though I've tried myself with different approaches, searched google and the mighty stackoverlow for hours.
The set-up:
I've got a panel with two list-groups next to each other, where relations can be managed. On the left are the linked items, on the right all available items that are not linked yet (featuring a pagination and all). The js-logic is working flawless. Clicking on a question-mark does display details for the item. Clicking on a plus moves an item to the left list, clicking on an "x" moves it back to the right. Of course the icons are properly switched, too.
The problem:
The items are user-generated and the form is used both on big and small screens (used bootstrap for that reason).
Some of the items do have a rather long name, limiting the users to keep it short is not an option here. If the text is too long, it just breaks out of the layout.
What I tried so far:
Since the input-groups work with simulating table-elements, I've tried several approaches with table-layout:fixed;, but that doesn't seem to work if it's not really a table. Then I tried several approaches with containing different elements in div-containers and giving them percentual sizes.
It never worked.
Now I'm experimenting with cutting the text server-side, but that looks stupid if the screen is wide enough and the text is cut anyway.
Does someone smarter than me have a solution that makes overflow:hidden; and text-overflow:ellipis; work on those elements?
Here is a (very cleaned-up) fiddle to work with:
https://jsfiddle.net/Fanmade/9vf8xvuL/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Left</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 1
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 2
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 3
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Right</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 4
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 5 just has a really long text and I don't want to cut it when there is enough space on wide screens
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 6
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Edit after the answers:
Thank you both so much for the answer!
I'm feeling so stupid right now. Of course the answer had to be so simple and I was just searching in the wrong direction.
The working fiddle is
https://jsfiddle.net/sesn/y98pz4hj/1/
Here is your answer
button { white-space: normal !important; height: auto !important; }
It will work :
button {
white-space: normal !important;
height: auto !important;
}