Topic: SideNav with checkboxes

Giovanni De Stefano priority asked 6 years ago


How can I add checkboxes or other input fields correctly to the SideNav?

Just adding the input field to the mdb-item-body does not work: the checkbox is displayed incorrectly (compared to the Test and Link).
The rendering looks like this: SideNav and Checkbox

Can you please advice?

Dawid Adach pro commented 6 years ago

Dear Giovanni, as component name suggest, sidenav is a place for a link , checkboxes are of no use there. Could you please let us know more about what are you trying to achieve with it? What will be the purpise of such mechanism ?

Giovanni De Stefano priority commented 6 years ago

Basically I have a list of options (checkboxes, radio buttons, select, etc) which are grouped by category. Each category needs to be in a Collapsible/Accordion/Squeezebox. All categories have to be in a "area" that can be shown or hidden: I thought of using the SideNav as a container for this "area" but apparently I misunderstood the goal of the SideNav... What do you suggest to use instead?

Dawid Adach pro answered 6 years ago

Dear Giovanni, The best would be to use collapse or accordion i.e.:
<button class="btn btn-primary waves-light" type="button" (click)="test.toggle()" mdbRippleRadius>
 Toggle collapse

<div class="" [mdbCollapse]="isCollapsed" #test="bs-collapse">
 <div class="form-group">
 <input type="checkbox" id="checkbox1">
 <label for="checkbox1">Classic checkbox</label>

<div class="form-group">
 <input type="checkbox" class="filled-in" id="checkbox2">
 <label for="checkbox2">Filled-in checkbox</label>

Giovanni De Stefano priority commented 6 years ago

Thanks, I am indeed rethinking the whole layout. Looking forward to the Admin template.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes