Struggling to dynamically generate columns of checkboxes in a dropdown using Angular and Bootstrap. Each checkbox item may or may not have related children.
The initial solution involved placing everything inside a div (.col-sm-4) from the Bootstrap grid system, but the items weren't aligned correctly.
Check out the code snippet below for an example:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size:14px; padding: 16px 15px">Item Name <span class="caret"></span></a>
<ul class="dropdown-menu" style="border:1px solid #dcdcdc;border-radius: 3px; width:1000px;">
<li ng-repeat="result in vm.listAnuncios.anunciosAgrupadosPorTipoPeca">
<div class="col-sm-4" style="border:1px solid red;">
<input type="checkbox" ng-click="vm.selectAll($event)" />
<span class="lbl padding-8" style="color:#8b8b8b; font-size:12px !important">
{{result.name}}
<span style="color:#b0b0b0;">{{result.total}}</span>
</span>
<ul id="tp_{{result.subTypeName}}">
<li ng-repeat="subItem in result.subItemsGrouped" style="margin-left:25px;">
<input type="checkbox" ng-click="vm.selectAll($event)" />
<span class="lbl padding-8" style="color:rgba(139, 139, 139, 0.88); font-size:12px !important">
{{subItem.name}}
<span style="color:#b0b0b0;">{{subItem.total}}</span>
</span>
</li>
</ul>
</div>
</li>
</ul>
</li>
(Please ignore any Portuguese text within the code.)
Expected Result: