Hi, I am using an oj-table and it has 8 columns, in one of the columns i am displaying oj-meter gauge. Problem is that i am facing an issue wherein td is not adjusting according to the content contained in it. The width of the content is less and td is taking more space. Rest all the columns has width according to the content contained in them
As you can clearly see, that element present in td is only occupying highlighted space.
Space taken by table td. As you can see rest of the columns are sized to contain content present in them.
HTML CODE
<div style = "width : 100%;" id = "dataTable">
<oj-table id='table' aria-label='Worklist Table'
data='[[pagingDatasource]]'
columns="{{columnArray}}"
on-oj-sort="[[tableSortListener]]"
selection-mode='{"row": "single"}'
columns-default='{"sortable": "enabled"}'
on-selection-changed='[[selectionHandler]]'
style='overflow : auto;width: 100%; border-color : #DCDCDC; overflow : auto; border-style:solid; border-width:thin; background : white;'> <!-- height : 450px; -->
<oj-paging-control id="paging" data='[[pagingDatasource]]' page-size='10' slot='bottom'>
</oj-paging-control>
</oj-table>
<script type="text/html" id="form_id_tmpl">
<td>
<button style="padding-left: 0px;background-color: transparent;border-style: none;" data-bind="click:function(){var router = oj.Router.rootInstance;router.go('review/'+$context.row.trackingID).then(function(result){if(result.hasChanged)window.location.reload();});}">
<span class="columndata" style="font-weight: bold;text-decoration: underline;" data-bind="text:$context.row.trackingNum"></span>
</button>
</td>
</script>
<script type="text/html" id="validity_tmpl">
<td>
<span class = "columndata" data-bind="html: $parent.validityCover($context.row.status, $context.row.confidence)"></span>
</td>
</script>
<script type="text/html" id="DocType_tmpl">
<td>
<span class="columndata" data-bind="text:$context.row.docType"></span>
</td>
</script>
<script type="text/html" id="DateProcessed_tmpl">
<td>
<span class="columndata" data-bind="text:$context.row.dateProcessed"></span>
</td>
</script>
<script type="text/html" id="Assigned_tmpl">
<td>
<span class="columndata" data-bind="text:$context.row.assigned"></span>
</td>
</script>
<script type="text/html" id="product_tmpl">
<td>
<span class="columndata" data-bind="text:$parent.productName($context.row.productName),attr:{'data-value':$context.row.productName}"></span>
</td>
</script>
<script type="text/html" id="quality_tmpl">
<td >
<oj-bind-if test="[[Number($context.row.quality) * 100 >= 71]]">
<oj-status-meter-gauge
id="gaugeHighQuality"
min="0"
max="100"
value="{{Number($context.row.quality) * 100}}"
orientation="circular"
readonly
style = "display : inline-block; margin-top:0; margin-bottom : 0;"
color="green"
class = "circular-status-meter-common circular-status-meter-small">
</oj-status-meter-gauge>
</oj-bind-if>
<oj-bind-if test="[[Number($context.row.quality) * 100 < 71]]">
<oj-status-meter-gauge
id="gaugeLowQuality"
min="0"
max="100"
value="{{Number($context.row.quality) * 100}}"
orientation="circular"
metric-label.rendered="on"
color="yellow"
style = "display : inline-block; margin-top:0; margin-bottom : 0;"
readonly
class = "circular-status-meter-common circular-status-meter-small">
</oj-status-meter-gauge>
</oj-bind-if>
</td>
</script>
<script type="text/html" id="reaction_tmpl">
<td>
<span class="columndata" data-bind="text:$parent.adverseEvent($context.row.adverseEvent),attr:{'data-value':$context.row.adverseEvent}"></span>
</td>
</script>
</div>
I want the td with meter gauge to resize to fit content.