I'm currently working on a project for an angular 2 recipe application, and I've encountered an issue with one of my HTML elements. The list items within the unordered list (which contain checkboxes) appear to be larger than the parent UL element. Please refer to the screenshot below.
https://i.sstatic.net/BxnDz.png
Here is the relevant section of my HTML code:
<tr>
<td>
Ingredients
</td>
<td>
<ul formControlName="ingredient_id" name="ingredient_id" class="form-control checkbox-grid" required>
<li *ngFor="let ingredient of ingredients" value="{{ingredient.ingredient_id}}">
<input type="checkbox" id="{{ingredient.ingredient_id}}" name="{{ingredient.ingredient_name}}" />
<label for="{{ingredient.ingredient_name}}">{{ingredient.ingredient_name}}</label>
</li>
</ul>
</td>
</tr>
And here is the corresponding CSS:
.checkbox-grid li { display: block; float: left; width: 25%;}
.checkbox-grid {
overflow: hidden;
}