I am looking to enable the selection of multiple buttons within a List group

I'm facing an issue with my code where the dropdown menu is not displaying dropdown items. I need help fixing this problem, it would be greatly appreciated. Additionally, I also want to enable multiple selection of buttons and change the color of each selected button.

 .list-group-horizontal .list-group-item {
    display: inline-block;
    
}
.list-group-horizontal .list-group-item:focus {
    display: inline-block;
    color:#fff;
    background-color: #41AADA !important; 
}

.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
    margin-right: 0;
   
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
    border-bottom-left-radius:4px;
   
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
    border-bottom-left-radius:0;
    
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-check list-inline list-group-horizontal" data-toggle="list-group-item"> 
        <button type="checkbox" id="btnGroupDrop1" type="button"  class="dropdown-toggle list-group-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            2018
          </button>
          <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" href="#">2017</a>
            <a class="dropdown-item" href="#">2016</a>
          </div>
      <button type="checkbox" class="form-check list-group-item">Quater 1</button>
      <button type="checkbox" class="form-check list-group-item">Quater 2</button>
      <button type="checkbox" class="form-check list-group-item">Quater 3</button>
      <button type="checkbox" class="form-check list-group-item">Quater 4</button>
  </div>

htmlcssangularbootstrap-4

Answer №1

Below is a suggested solution:

.list-group-horizontal .list-group-item {
  display: inline-block; 
}
.list-group-horizontal .list-group-item:focus {
  background-color: #41AADA !important; 
  color:#fff;
  display: inline-block;
}
.list-group-horizontal .list-group-item {
  margin-bottom: 0;
  margin-left:-4px;
  margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
  border-top-right-radius:0;
  border-bottom-left-radius:4px;  
}
.list-group-horizontal .list-group-item:last-child {
  border-top-right-radius:4px;
  border-bottom-left-radius:0;   
}
.form-check label {
  padding:.75rem 1.25rem;
  margin-bottom:0;
}
.form-check label input[type="checkbox"] {
  opacity:0;
}
<!-- include the CSS files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- include the JavaScript files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<!-- the HTML -->
<div class="form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons"> 
  <button type="checkbox" id="btnGroupDrop1" type="button"  class="dropdown-toggle list-group-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle="buttons">
    2018
  </button>
  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a class="dropdown-item" href="#">2017</a>
    <a class="dropdown-item" href="#">2016</a>
  </div>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 1
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 2
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 3
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 4
  </label>
</div>

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

Exploring the power of nested components within Angular 2

I am encountering an issue with a module that contains several components, where Angular is unable to locate the component when using the directive syntax in the template. The error message I receive states: 'test-cell-map' is not a known elemen ...

angulartypescriptnestedangular-components

Tips on saving php variable content in HTML "id"

Three variables are used in PHP: message_id, message_title, and message_content. Their content is stored inside HTML 'id' for later use with jQuery. Example: Variables: $id_variable = $rows['id_mensagem']; $message_title_edit = $rows ...

javascriptphpjqueryhtml

Is it possible to display a Twitter feed within a Bootstrap popover?

Is it feasible to showcase a Twitter feed within a Bootstrap popover? For instance, when the Twitter button is clicked, I aim to have my website's Twitter feed appear inside a Bootstrap popover. I have attempted the code below without success. Any a ...

htmlcsstwitter-bootstraptwitter

The firebase.d.ts on iOS functions properly, whereas on Android, it becomes

Currently, I am working with Ionic 2 on my Mac system. Your system information: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 1.0.0 ios-deploy version: Not instal ...

cordovaangularfirebaseionic2firebase-authentication

ul/div element not displaying background color

I am attempting to showcase navigation items horizontally within a blue colored ribbon. Despite my efforts, the background-color property is not being applied to the ul element. I even tried enclosing it in a div element with a blue background, but still n ...

htmlcssbackground-color

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

Updating the checklist status using an ajax request: A step-by-step guide

Is it better to update the checklist status by making individual ajax calls for each checklist item or by making one call and updating it once completed? I have included a template showing how it currently looks and what I am aiming for. Unfortunately, I ...

javascriptjqueryhtmlcssajax

Submitting forms with Ajax in IE(8)

Sample Google form Related spreadsheet I modified the original code to create two custom forms: First created form Second created form Both forms are functional on most browsers except for IE(8). Any idea why? First form: <!DOCTYPE html> <h ...

javascriptjqueryhtmlajaxforms

Add a touch of mystery to a triangle SVG with CSS shadows

Is there a way to apply shadows to SVG images, like a triangle? I've tried using polyfill solutions but they didn't give me the desired effect. Check out this JSFiddle where I showcase what I'm trying to achieve. This is my HTML: <div c ...

javascripthtmlcss

After resolving a quirky syntax error in my ejs code, I can't help but ponder what caused the issue in the first place

For my personal web development project, I've been working on a blog webpage to enhance my skills. However, I encountered an unusual syntax error while modifying the code to display different navigation bars for logged in and logged out users. Here&ap ...

htmlnode.jssyntax-errorejs

Creating a legitimate Angular 6 form模shape

I want to reset my form using the following method: public static resetDescriptionFields(i: any, component: any) { var formItems = component.form.get('items') as FormArray; var descriptionItem = formItems.controls[i].g ...

javascriptnode.jsangulartypescript

Angular 13: SyntaxError Encountered: Token 'export' Not Recognized

After upgrading Angular from version 12 to 13, I encountered an error when running the app: "Uncaught SyntaxError: Unexpected token 'export'." Here are some additional details for context: In the angular.json configuration file, I had specified ...

angulartypescriptexportsyntax-errorangular13

What's the reason this picture isn't displaying in its full size?

I am having trouble adjusting the size of this image to fit the full width, but there seems to be some remaining space on the right side. Category: CSS/HTML /* Header */ .header { background: url('https://picsum.photos/1920/1080') center ...

htmlcssbootstrap-4

Removing a blank line from a null variable in PHP and appending a backspace to it to display HTML text

How can I remove the empty line for a null variable? For example: $line1 = "Hello All"; $line2 = "Hello You"; $line3 = "Hello Me"; $line2 = null; Now when I echo echo "$line1<br>$line2<br>$line3"; it shows an empty line in the middle whe ...

phphtmltextnullecho

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

javascriptjquerycssanimation

Mastering the art of using div boxes in boxing form

When I box in information using divs, I've noticed that sometimes the wrapping boxes don't fill out the space completely. This can result in elements from other wrappers encroaching into the box area. For example: <div> <div style="le ...

htmlcss

The print preview displays a single div in an incorrect location

I have successfully created a javascript plot and wanted to incorporate a legend that overlaps the plot. Unfortunately, the function I used does not support directly overlapping legends, but it does allow for placing the legend in a separate div. To work a ...

javascripthtmlcss

Is there a way to customize the cursor of the webkit resizer (pulltab)?

I'm having difficulty implementing a custom cursor on my webkit pulltab. While I am able to change other properties like background color, the CSS "cursor" property remains unchangeable: #sessionbuilder::-webkit-resizer { background: #000; cursor ...

htmlcsswebkit

What kinds of font file formats are you utilizing?

In numerous projects, I have observed a common practice of using multiple font extensions such as .TTF, .WOFF, and .WOFF2. However, this can result in having multiple files for a single source. Imagine the clutter if one has several sources with different ...

csssass

Automatically assign the "Restricted" cursor to disabled fields within a dynamic form

Is there a method in Angular 6/7 that allows the cursor to change to "Not Allowed" when hovering over a disabled field in a reactive form? I prefer not to use CSS for this cursor change. Is there a way to achieve this through Angular alone? Currently, th ...

angularcsstypescriptangular-reactive-formsangular-forms