How can a multicheck dropdown similar to Gmail be developed using HTML, CSS, and Bootstrap 4?

I am working on creating a multicheck dropdown similar to the one used in Gmail. Here is an example of what I have accomplished so far :

https://i.sstatic.net/X5eIg.png

However, I am not satisfied with how it looks.

Could someone please provide suggestions on how I can achieve a design closer to the image shown below?

UPDATE:

Below is the code snippet for my multicheck dropdown:

<th >
                            <div class="dropdown text-center">
                                    <input type='checkbox' value='loadBalancing' [(ngModel)]="selectedAll" (change)="selectAll($event)">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="margin-left:33%; margin-top: -2%">
                                      <a class="dropdown-item" href="#" (click)="selectAll(true)">SelectAll</a>
                                      <a class="dropdown-item" href="#" (click)="selectAll(false)">None</a>
                                    </div>
                                  </div>
                        </th>
htmlcssangularbootstrap-4

Answer №1

.btn.dropdown-toggle {
   background: #e2e4e6;
   border: 1px solid #c3c3c3;
   color: #949494;
   padding: 3px 20px;
   border-radius: 0;
}

.btn.dropdown-toggle:focus {
  outline: none;
  box-shadow: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<th >
  <div class="dropdown text-center" role="button">
    <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <input type='checkbox' value='loadBalancing' [(ngModel)]="selectedAll" (change)="selectAll($event)">
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="margin-left:33%; margin-top: -2%">
      <a class="dropdown-item" href="#" (click)="selectAll(true)"> SelectAll
      </a>
      <a class="dropdown-item" href="#" (click)="selectAll(false)">None
      </a>
     </div>
  </div>
</th>

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

Implementing a Link Button in Yii2 FullCalendar

I have been successfully using FullCalendar, however I am now in need of adding a link to the button with className='btn' so that when clicked, it redirects to the view page. Code snippet from my controller: public function actionIndex() { $ ...

phphtmlyii2fullcalendaryii2-advanced-app

mention colleague(parent) instruction request

I have been exploring the use of metadata for setting HTML input attributes. After reading through the Attribute Directives Guide (https://angular.io/docs/ts/latest/guide/attribute-directives.html), I have developed the following implementation: import "r ...

javascripthtmlangularangular2-directives

Is it possible to selectively exclude features such as routes and components from my Angular application during the build process based on the environment configuration file?

I am interested in creating two variations of my Application using the same codebase. One version will have the "registration" feature included, while the other will not. Is there a way to configure Angular so that an environment file dictates what is ex ...

angularangular-ivy

Enhancing NG Style in Angular 6 using a custom function

Today, my curiosity lies in the NG Style with Angular 6. Specifically, I am seeking guidance on how to dynamically update [ngStyle] when utilizing a function to determine the value. To better illustrate my query, let me present a simplified scenario: I ha ...

cssangulartypescriptng-style

Position the image, text, and header within a box in uniform alignment

Currently, I am working on a design that includes an image, a header, and some text inside a box. However, I am facing an issue with aligning the header so that it appears above the rest of the text. The layout is not turning out as expected. https://i.ss ...

htmlcss

Using the arrow keys, I must adjust the border sides

I am looking to switch between different sides of borders by using the arrow keys $(function(){ $(document).keydown(function(e){ switch(e.which){ case 38:$("#sh").css("border-top-color", "#fff"); //arrow up break; ...

javascripthtmljqueryuser-input

What is the best way to add an image using php, javascript, and browser storage?

Previously, I successfully uploaded an image using PHP and HTML. Now, I need to achieve the same with JavaScript (js) and AJAX. Additionally, I have been advised to utilize local storage for server-side storage before inserting it into the database. Below, ...

javascriptphphtmlajax

Issue: formGroup function requires a valid instance of FormGroup. Kindly ensure you are passing the correct parameter. Encountering the error even

I've seen this question asked countless times, but it seems like most of the solutions are related to typos. I have simplified my code to match exactly what the error message is suggesting: https://i.sstatic.net/M0LEG.png Here is the relevant part o ...

angularforms

Attempting to squeeze a lengthy word into a small span

Apologies for my poor English. I tried searching for an answer online but couldn't find a solution. Maybe I'm just not able to figure it out myself. All I need is to make those long words fit inside a button. This is how it currently looks. My ...

htmlcss

Implementing a text field to initiate an Ajax request

I need help with triggering my Ajax function whenever a text field is changed. As someone who is new to Ajax, I'm not sure if this is even possible. Any guidance on how to achieve this would be greatly appreciated! Html <form> <a>Ent ...

javascriptjqueryhtmlajax

How can one address the issue of undefined data within table cells?

I have encountered an issue while reading and displaying an XML file on a webpage using a JavaScript script. The problem arises when the page loads, and the information inside the cells of the table shows as "UNDEFINED". The intended display should include ...

javascripthtmlxmlhtml-tableundefined

Issues with Angular Resolver Service Functionality

This code snippet includes the RoleList Component, Resolver Service, and HTML template for listing roles and corresponding users. The data is fetched using a resolver service, but the list only populates after clicking a button. The issue is that initia ...

angularangular-resolver

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

The character codes for symbols in a unique font available at fontello.com

Is there a way to identify the charCode for a glyph in a custom font? In order to keep my website lightweight, I have designed a custom font with only the 5 icons from FontAwesome that are necessary using . These icons will replace the characters from the ...

cssfont-awesomeglyph

My code is currently experiencing an issue - I'm trying to figure out how to center a

Can anyone help me troubleshoot the code in my attempt to make an image responsive and center it? I've been struggling with this issue and can't figure out what I'm doing wrong. Here's an example of how it currently looks on my screen: ...

csstwitter-bootstraptwitter-bootstrap-3

Is it possible to design and implement Materialize CSS inputs without relying on Materialize CSS?'

Is there a method to implement Materialize CSS input elements that include placeholders and icons without directly using the Materialize CSS framework? I prefer not to mix frameworks in order to avoid potential conflicts, as I am already utilizing anothe ...

cssmaterialize

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

I have been experimenting with Bootstrap's Example accordion code, which can be accessed via this link: http://jsfiddle.net/qba2xgh6/18/ <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Tips on sorting through an array using Angular 11 and data

I'm working on a subpage that contains a large amount of detailed data in the form of thousands of records. I want to filter this data based on the "id" from my route, which is also included in the dataset. However, I've run into some difficultie ...

angulartypescriptfilteringngfor

There seems to be a missing sort functionality in the Angular material table, and no error messages

Utilizing the material table sorting feature in Angular 18 material design. The setup appears to be correct, but clicking on the column header (mat-header-cell) does not trigger the sorting functionality. users.component.html <div class="example- ...

angular

Aligning the menu links to the right on a horizontal CSS menu

I have created a horizontal menu using CSS and HTML with the following code: .nav > li:hover { background: #666666; text-decoration:none; } .active { background: #666666; text-decoration:none; } nav, ul, li, a { margin: 0; paddi ...

javascripthtmlcss