Update: Successfully resolved the initial issue, now focusing on fixing the second part.
Take a look at this demo app I am developing. I am working on adding a feature that allows users to create subtasks for each todo item, which will appear when the task is clicked on. However, I encountered an issue when a task has a lengthy description like:
<li>veryveryverylongstringveryveryverylongstringveryveryverylongstringveryve...
This causes the list to overflow and expand the table width (try clicking on any task in the fiddle link above to see the problem). This is the main issue I need help resolving. I have attempted using CSS properties like word-wrap: break-word and tried suggestions from other stackoverflow posts with no success on the following div element:
<div class="container" ng-show="thisTodo.showSubtask" style="background-color:red">
This brings me to problem 1: How can I ensure that list elements wrap properly without altering the original table size?
The second issue involves:
<li>
<label>
<input type="checkbox">
</label>
<input type="form-control">
<button class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-plus"></i></button>
</li>
This snippet does not occupy the entire width of the cell it's placed in. I'm uncertain about the best approach to address this concern.
I welcome any guidance or advice on these matters.
Thank you very much.