I have integrated data table.net into my website and encountered an issue with the labels in the status column. The labels for 'in progress', 'assigned', and 'not assigned' are not wrapping properly.
I have tried using text-wrap and inline styles to resolve this problem, but without success. My website is built using Bootstrap 4.
Below is the structure of the table:
<table class="table table-separate table-head-custom table-checkable" id="linetb">
<thead>
<tr>
<th>Reg ID</th>
<th>Customer Name</th>
<th>Contact No</th>
<th class="p-">Service Type</th>
<th>FTTH Package</th>
<th>FDP</th>
<th>Received Date</th>
<th>Assigned Date</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>112234455</td>
<td>Ms John Fernando</td>
<td>0736252738</td>
<td>CREATE</td>
<td>IP</td>
<td>HC-23S-0-34y473-434233-1</td>
<td>10/15/2017</td>
<td>10/15/2017</td>
<td><span class="label label-lines label-success font-weight-bolder label-pill label-inline mr-2">IN PROGRESS</span></td>
<td nowrap="nowrap"></td>
</tr>
Here are the styles used:
.label.label-inline {
width: auto;
}
.label.label-pill {
border-radius: none;
}
.label.label-inline {
width: auto;
padding: 0.2rem 2rem;
border-radius: 0.42rem;
}
.label.label-hello-sucess {
color: #6d7517;
background-color: #c2d50061;
}
The text inside the label is not properly wrapped. You can view the image here.