css - What is the correct way to place each option of a ngx-bootstrap-multiselect on it's own row?

Question

I just upgraded an Angular 8 project to Angular 9 and I'm trying out ngx-bootstrap-multiselect.

The way the items are placed on one line creates for a wonky display (where sometimes checkbox for subsequent items are displayed to the right of the preceding item).

Is there a setting that directly controls this? If not, what's the recommended alternative (I'm thinking of using itemClasses).

question from:https://stackoverflow.com/questions/65829954/what-is-the-correct-way-to-place-each-option-of-a-ngx-bootstrap-multiselect-on-i

Answer 1

Based on @Justinas comment, I was able to get the items to display correctly by adding this to the parent component css file:

::ng-deep span[role="menuitem"]{
    display: block;
}

The component still exhibits some strange behavior. When a single item is clicked, every item is selected:

I think it is due to the fact that the component requires Bootstrap 4 (I am on Bootstrap 3). Related thread here: https://github.com/softsimon/ngx-bootstrap-multiselect/issues/462#issuecomment-560370149