Steps to turn off hover functionality in bootstrap 4 dropdown menus

I am dealing with a situation where I have a page containing a data grid, and each row in the grid contains a bootstrap dropdown button/menu with various actions that can be performed on that specific row of data. However, there is a problem - the menu opens when you hover over it, but I want it to open only when clicked (to prevent users from accidentally opening the wrong menu).

Is there a way to use CSS to instruct the menus not to open on hover? Ideally, I would like to avoid using jQuery for this task. Additionally, since there are other dropdowns on the page that are not part of the grid, I would like to specifically target only the ones within the grid to avoid affecting the others.

Here's an example of a cell within an 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>
htmlcssangularjsbootstrap-4

Answer №1

Please remove the following style from your CSS file:

.dropdown:hover>.dropdown-menu {
  display: block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make sure to close all your tags properly in PHP

Within my <textarea>, I am giving users the ability to submit content. The specific tags I want to allow include <b>, <i>,<blockquote>, and <del>. In order to prevent any unclosed tags since this content will be displayed on t ...

phphtml

What is causing the :active property to fail to work properly?

I'm currently working with Bootstrap, but I'm experiencing an issue with applying the :active state as a background color. It's not showing up, although it is changing the text color. Here is the HTML code: <button class="btn btn_sty ...

cssbootstrap-4css-selectors

"AngularJS fails to pass the value of a checkbox within ng-repeat and

I have already asked this question, but the previous solutions did not resolve my issue. I am attempting to pass the value of a checkbox to a controller in AngularJS, but I keep getting an 'undefined' message. I am new to AngularJS. Here is the ...

javascriptangularjsselectcheckboxundefined

Code formatting for MVC HTML layout in C#

When working with asp.net mvc views, I like to incorporate C# logic that handles layout in the following manner: <% if (Model.People.Count > 0 ) { %> <% foreach (var person in Model.People) { %> ... <% }} else { %> & ...

asp.nethtmlasp.net-mvc

The toggle functionality for checking all boxes is not functioning as anticipated

I am currently working on a method to toggle a checklist as checked or unchecked. Here is the code snippet: $scope.checkAllToggle = function(dtProvider, destiny, ev) { $(ev.currentTarget).parent().find('span').html()); data[destiny] ...

angularjs

Creating a scrolling sidebar in Bootstrap 4

Today I learned about CSS Bootstrap 4 and created my template with a sidebar. However, when there are many menus, I want the sidebar to show a scrollbar. I am looking for help on how to make a scrollbar appear on my sidebar template. Below are my HTML and ...

cssbootstrap-4scroll

Include specific javascript files only for smartphones

Recently, I encountered an issue with a JavaScript code that swaps background images on scroll down. To address the problem with debounce, I ended up setting different debounce times for various browsers (I am aware this is not the ideal solution, but it&a ...

javascriptjqueryhtmlcss

Upgrade to Angular 1.2 by replacing directives with universal settings

I created a directive that replaces a specific date (a flag) with a custom string. app.directive('dateToText', ['$timeout', function($timeout) { return { restrict: 'A', link: function(scope, el, attrs) { ...

angularjs

The numbering in the list does not align vertically with the corresponding content

I am attempting to create an ordered list with collapsible sections inside the li elements. The goal is to display basic information about a specific context, and when clicking on a link, additional details are shown. While the code is functional, I am fac ...

csstwitter-bootstrapbootstrap-5

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

I need a solution where an input field's height adjusts to display the user's entry, then returns to normal size when they click away. It should function similar to this example image: https://i.stack.imgur.com/yKcik.png Once the user enters th ...

htmlcssangularless

In order to properly set up Require JS, you will need to configure the JS settings

Is there a way to specify the path from any property inside the require JS config section? We are trying to pass a property inside the config like so: The issue at hand: var SomePathFromPropertyFile = "CDN lib path"; require.config({ waitSeconds: 500 ...

javascripthtmlangularjsrequirejsr.js

What is the reason behind the default disabling of bootstrap multiselect options?

Just diving into the world of bootstrap and I'm puzzled as to why my simple multiselect options aren't responding when clicked. UPDATE The first multiselect option on the test-site linked below is the one giving me trouble. I've tried it o ...

javascriptjqueryangularjshtmltwitter-bootstrap

Easy Peasy CSS Placement

Struggling with CSS and in desperate need of assistance. I've provided my code attempts along with pictures showing what I currently have versus the desired outcome. HTML <div class="thumbposter"><img src="http://tipmypicks.com/cssmovie ...

htmlcss

Creating a Redirect Form that Directs Users to a Specific Page Depending on Input Data

Apologies if this is a basic issue, but I'm struggling to figure it out. I am trying to create a form field on a webpage that will redirect users to a specific page based on the data they input. For example, if someone types in "dave" and submits the ...

javascriptphphtmlforms

What is the best way to access a local variable within a POST method in Node.js?

Below are some of the modules that I have utilized: const mysql = require('mysql'); const express = require('express'); const session = require('express-session'); const path = require('path'); const bodyParser = req ...

htmlnode.jsexpressejs

Extract information from a constantly changing HTML webpage using Java

Is there a way to retrieve data from the Live Cyber Attack website? I am looking to extract specific information such as Time, Type of Attack, Attacking Country, and Target Country. I need this data to be dynamic for analysis purposes. Currently, I am wo ...

javahtml

Google's local host connection is currently being refused

Recently, as I was practicing HTML code to work on some forms, I encountered an issue when trying to run the code in the browser by pressing F5. Instead of seeing my code displayed, I received an error message that read: This site can’t be reached local ...

htmlcompiler-errors

What are the steps to generate an image upon clicking a button?

Here's what I have now: <script> function display() { var element = document.getElementById('display'); element.innerHTML='<img src=\"display.png\">'; } </script> And the HTML code: <input type ...

javascripthtml

Place the first paragraph within a div above another paragraph in the same div

Presently, I have this item: https://i.stack.imgur.com/0dBd9.png however, my objective is to achieve this look: https://i.stack.imgur.com/NEBZf.png The code snippet in question is as follows: .bonus-div { width: 290px; height: 29px; ma ...

htmlcss

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

The header is not responding despite inputting width: 100%. How can I ensure that the header is responsive on all browsers, as well as iPads and phones? .head-wrap { background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-p ...

csswordpress