Creating an input that can increment or decrement within a dropdown menu - instructions

I am currently working on creating a dropdown with decrement/increment buttons, similar to the one shown in the image below:

https://i.sstatic.net/nTC9Z.jpg

Here is the code I have so far:

<div class="dropdown">
 <button class="btn border-0 dropdown-toggle form-control" type="button"
  id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false"> 
    Dropdown</button>
 <div class="dropdown-menu" style="width: 250px; background-color: #343a40" 
  aria-labelledby="dropdownMenu2">
   <div class="dropdown-item">
     <div class="row text-white">
      <div class="col-md">
       <i class="fa fa-user mr-2"></i>Adult</div>
      <div class="col-md text-center">
       <button class="btn btn-sm btn-success mx-2">+</button>
       <span>1</span>
       <button class="btn btn-sm btn-success mx-2">+</button>
      </div>
     </div>
    </div>
   </div>

I have been able to make it this far, but I am facing issues where the page scrolls to the top when the button inside the dropdown is clicked, and I also do not like the background color changes when hovering over the dropdown item. Can someone please help me fix these issues? Thank you.

UPDATE: The only thing left to do is prevent the page from scrolling when the button inside the dropdown is clicked. Can anyone provide assistance with this?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To start, you must ensure that the dropdown remains open when a user interacts with it. JS:

  $('.keep-open').on({
    "shown.bs.dropdown": function() { $(this).attr('closable', false); },
    "click":             function() { },
    "hide.bs.dropdown":  function() { return $(this).attr('closable') == 'true'; }
});

$('.keep-open #dLabel').on({
  "click": function() {
    $(this).parent().attr('closable', true );
  }
})

html:

<div class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="width: 250px; background-color: #343a40" >
     <div style="display: block;text-align:center;margin-bottom:5px;margin-top:5px">
      <div style="display: inline-block;color:white">
       <i class="fa fa-user mr-2" style="margin:15px;"></i>Adult</div>

       <button class="btn btn-sm btn-success mx-2">-</button>
       <span>1</span>
       <button class="btn btn-sm btn-success mx-2">+</button>
       </div>
          <div style="display: block;text-align:center;margin-bottom:5px;">
       <div style="display: inline-block;color:white;">
       <i class="fa fa-user mr-2" style="color:white;margin:15px;"></i>Child</div>

       <button class="btn btn-sm btn-success mx-2">-</button>
       <span>1</span>
       <button class="btn btn-sm btn-success mx-2">+</button>
      </div>
      </div>

plunker: http://plnkr.co/edit/s4nmZVXpLMzZLDSzVd24?p=preview

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

adjusting array based on screen size fluctuations

Imagine having two arrays of images named landscape_images[] and portrait_images[]. One is for the landscape view and the other for the portrait view. When the screen width is in landscape mode, the wide resolution images will be displayed on the body. C ...

javascripthtmlcssreactjs

Table does not have appropriate rowspan and colspan attributes

I've created a table using bootstrap, but it's not displaying as intended. I used row-span and col-span to format the table, and while most rows are correct, some are not appearing on the page. To better illustrate the issue, I have included an ...

htmlcssbootstrap-4

Link not functioning correctly on mobile-responsive CSS

Having some trouble with hyperlinks over a background image. The hyperlinks work fine normally, but in mobile view, nothing happens when clicking on them. Below is the code for the hyperlinks. You can also visit the site and see that the "Post a Project" ...

htmlcssbootstrap-4

Illustration within the <li> element

I am facing an issue with floating elements inside the <li> tag. Below is my current markup: <li> <img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg" style="float:left"> <p>2013 Toyota Tacoma</p> <p>Pric ...

htmlcsscss-float

The image tag is being used to show the exact location, however, there is no

How can I load a previously uploaded image via ID in the controller? The controller passes the correct location to the view, but the view does not display the image. When I inspect the view page, it shows the correct ID and location but does not render the ...

phphtmlimagesrccodeigniter-4

The circles seem to be elusive, refusing to make an appearance on the forefront of the HTML webpage

My scatterplot circles appear to be behind the graph, and I can't figure out how to bring them to the front. Can anyone help me with this issue? Even though the inspection shows that the circles are there, they are not visible on the plot. scatterplo ...

javascripthtmlcssscatter-plot

Having issues with AJAX and button submit while trying to upload a file using Flask

I've been attempting to incorporate a file upload feature (specifically a .csv file) using bootstrap, and then submit it by clicking on a button. I've experimented with various methods to implement the file upload functionality, but haven't ...

javascripthtmlajaxflask

Angular: The application has encountered an error due to an undefined property reading issue, resulting in a type error

Here is the code for the company.ts file: company.ts file - List item export class Company{ gstNo:number; contactNumber:number; contactName:string; phoneNo:number; address:string; companyName:string; } import { Injectable } ...

javascripthtmlangulartypescriptfirebase-realtime-database

jQuery Image Carousel on Chrome, Firefox, and Safari browsers

On my website, I currently have a small slideshow implemented using jQuery. When viewing my webpage in Firefox, the slideshow appears perfectly aligned. However, when I check it in Safari and Chrome, I notice that the slideshow is offset by about 15px. Th ...

jqueryhtmlcssimage

Display a different element upon CSS hover

I am attempting to use CSS to display div id='b' when I hover over div id='a', but I am struggling because div 'a' is nested within another div that does not contain div 'b'. <div id='content'> ...

htmlcsshover

My custom Material UI table is being hindered by unnecessary div tags that are interfering with my CSS styling

View the generated code The rendered table demonstrates that when scrolling past the maximum width, the data does not appear <div> <table (not going to display all the markup for this. this table contains the headers of each column and appear ...

htmlcssreactjsmaterial-ui

Error Starting Bootstrap 4 with NPM

I am currently in the process of learning how to automate various tasks related to web development using npm scripts. Displayed below is the contents of my package.json file: { "name": "confusion", "version": "1.0.0", "description": "This particula ...

npmbootstrap-4npm-scripts

Utilizing a Bootstrap grid system (or an IE-compatible CSS grid) to align elements on the provided

Looking for suggestions on achieving the following layout without using CSS grid, either with Bootstrap or IE compatible CSS grid. On large screens: Head and body stack on the left, with an image on the right covering the height of both. [&mdash ...

htmlcssinternet-explorergridviewbootstrap-4

Clicking inside the bootstrap modal does not trigger the ng-click event

I encountered an issue while trying to implement the "ng-click" function from Angular into an HTML page. It worked initially, but when I tried using the same "ng-click" function within a Bootstrap modal, the code stopped functioning. Can anyone explain why ...

htmlangularjstwitter-bootstrapangularjs-scope

Creating a Vibrant Progress Bar with Multiple Colors: A Step-by-Step Guide

I'm still getting the hang of things, so I apologize if my question isn't perfectly clear. What I'm trying to do is create a dynamic progress bar with multiple colors that animates upon loading the page. I've seen some examples similar ...

javascriptjqueryhtmlcssprogress-bar

Resolving Issues with Text Overlaid on an Image Hyperlink

Alright, so this problem might be a bit too complex for CSS/HTML to handle, but I'll give it a shot anyway. I have some images that are dynamically placed using the code from this website. What I want to do with these images is add a text overlay w ...

htmlcssoverlay

Is there a way to connect two tables using CSS pseudo-selectors?

Is there a way to make two separate tables interact with each other using CSS pseudo-selectors? I have a data table and an auto-numbered table, and I want the rows to highlight in both tables when hovering over a cell in one of them. I've tried using ...

javascripthtmlcssreactjscss-selectors

Incorporating Bootstrap Navbar into a create-react-app project

I recently created a new project using create-react-app. To incorporate Bootstrap into my project, I followed these steps: npm install --save bootstrap@3 Next, I imported Bootstrap in my root file index.js: import 'bootstrap/dist/css/bootstrap.css& ...

javascripttwitter-bootstrapreactjs

Verify login availability using Javascript auto-check

For quite some time now, I've been grappling with a significant issue that has been consuming my attention. I am determined to implement an auto-check login availability feature in the registration form of my website. My goal is for it to verify the ...

javascriptphpjqueryhtmlajax

Delay in Event Firing onkeyup

I have implemented an input textbox for users to enter a username, which triggers an AJAX request using the onkeyup event attribute to verify if the username is available. What is the timing between each keystroke triggering the AJAX request? For insta ...

javascripthtmlajaxperformance