Checkbox not showing in bootstrap dropdown

Question

I'm trying to simply display a checkbox in a bootstrap drop down but its just displays as blank. It's a generic dropdown. Below I've shown my code and a few screenshots. I feel like this is kinda bizarre and not sure if this is an angular thing or not.

stackblitz url:

https://stackblitz.com/edit/angular-45uk59

Code:

<div class="form-group">
  <label *ngIf='label!=null' for={{id}}>{{label}}}</label>
  <select class="form-control" id="{{id}}">
    <option value="-1"></option>
    <option *ngFor="let item of content; let i = index" value="{{item.value}}">
      <span *ngIf='hasCheckbox === true'>
        <!-- <input type="checkbox" id="{{id}}_i" /> &nbsp -->
        <input type="checkbox" name="item.text[{{i}}]" value="{{item.value}}" /> &nbsp;
      </span>
      {{item.text}}
    </option>
  </select>
</div>

Component:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {

  content: DropDownContent[] = new Array<DropDownContent>();

  @Input() hasCheckbox:boolean = false;
  @Input() label:string  = null;
  @Input() id:string = 'defaultId'
  @Input() selectedId:number = -1;
  @Input() size: 'lg' | 'md' | 'sm' = 'lg';
  @Input() set contentInput(contentInput: DropDownContent[]) {
    if (contentInput) {
      this.content = contentInput.map(data => {
        return <DropDownContent>(data);
      });

      console.log(this.content);
    } else {
      //?
    }
  }

  constructor() { }

  ngOnInit() {
    console.log(this.id)
  }
}

export class DropDownContent {
  value: number;
  text: string;
}

Screenshot:

Code:

What is the value for Hascheckbox in ngIf ?if hasCheckbox is false then checkbox not displayed — Hitesh Kansagara, Apr 22 '18 at 06:07
Not sure how, I'm very new to angular. But i added the html in dev chrome console. It's actually showing the input checkbox in html, but not showing on my page? — tshoemake, Apr 22 '18 at 06:09
No sir. And everything else in the page works as expected as well. — tshoemake, Apr 22 '18 at 06:13
I've added my component code. The hascheckbox seems to be working fine as it's triggering the ngif as true. — tshoemake, Apr 22 '18 at 06:30
where you set the value true for hasCheckbox? I did not find in component — Hitesh Kansagara, Apr 22 '18 at 06:51
@AmayaSan that's pretty neat, yeah here's the url. Looks like the same issue. https://stackblitz.com/edit/angular-45uk59 — tshoemake, Apr 22 '18 at 16:24
Hi @tshoemake please refer to this https://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element, i think this answers your question — John Velasquez, Apr 22 '18 at 16:34

score 0 · Answer 1 · answered Apr 22 '18 at 06:20

You could wrap divs in a form like sort of hack thing. not exactly what you want but it works:

HTML

<form>
  <div class="selectthingy">
    <div class="Box" onclick="showMeTheBoxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="checkboxselect"></div>
    </div>
    <div id="boxes_wrapper">
      <label for="one">
        <input type="checkbox" id="1" />SALSA</label>
      <label for="two">
        <input type="checkbox" id="2" />MUMBA</label>
      <label for="three">
        <input type="checkbox" id="3" />CHICKEN DANCE</label>
    </div>
  </div>
</form>

CSS

.selectthingy{
  width: 300px;
}

.Box {
  position: relative;
}

.Box select {
  width: 100%;
}

.checkboxselect {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
}

#boxes_wrapper {
  display: none;
  border: 1px green solid;
}

#boxes_wrapper label {
  display: block;
}

#boxes_wrapper label:hover {
  background-color: blue;
}

JS

var boxthingy= false;

function showMeTheBoxes() {
  var boxes = document.getElementById("boxes_wrapper");
  if (!boxthingy) {
    boxes.style.display = "block";
    boxthingy= true;
  } else {
    boxes.style.display = "none";
    boxthingy= false;
  }
}

https://codepen.io/Archtects/pen/LmpLZr

I appreciate your response, but definitely not looking to do a hack. — tshoemake, Apr 22 '18 at 06:31

Vega · Answer 2 · 2018-04-24T05:51:57.653

0

Instead of the checkbox, I suggest to use a plain text with emoji. It will be show and hidden with an ngIf with the help of hasCheckbox property combined with a new property to keep the track of selected elements:

export class DropDownContent {
  value: number;
  text: string;
  selected: boolean

}    
...
this.contentInput = [{
      "value": 0,
      "text": "Users",
      "selected": true
    },
    {...

So the template could be:

<select id="{{id}}" multiple>
    <option (dblclick)="item.selected=!item.selected" *ngFor="let item of content; let i = index" value="{{item.value}}">
      <span *ngIf="item.selected && hasCheckbox">✓</span>
      {{item.text}}
    </option>
</select>

Demo

edited Apr 24 '18 at 05:51

answered Apr 22 '18 at 20:36

Vega

27,856
27
95
103

hasCheckbox is a value being provided from a parent component. It's telling the generic dropdown component whether we need to have checkboxes or not. If hasCheckbox is true, we're adding these checkboxes as a prefix to the item. If it's false, we just add the item without checkbox. I shortened the code for brevity. – tshoemake Apr 22 '18 at 20:39

Checkbox not showing in bootstrap dropdown

2 Answers2