I struggle with css, but I have a specific design in mind and have attempted to implement it.
<div>
<div id="propertiesTable" style="padding: 20px 20px 20px 20px;" ng-cloak >
<table class="table table-striped table-bordered">
<tbody>
<tr data-ng-repeat="(k,v) in properties">
<td>{{ k }}</td>
<td>{{ v }}</td>
</tr>
</tbody>
</table>
</div>
<div style="padding-left: 20px;">
<button type="submit" class="btn btn-primary btn-sm"
title="Refresh for updated properties"
ng-click="onRefreshButtonClick()">
<span class="glyphicon glyphicon-refresh">Refresh</span>
</button>
</span>
</div>
</div>
I am facing an issue with the alignment of the glyphicon glyphicon-refresh icon within the class="btn btn-primary btn-sm" button structure.
How can I add space between the glyphicon glyphicon-refresh icon and the class="btn btn-primary btn-sm" container? Padding seems to affect the entire button instead.
- Is there a way to achieve padding between the
glyphicon glyphicon-refreshicon and theclass="btn btn-primary btn-sm"container? - Additionally, when clicking the Refresh button, is it possible to apply a mask or light dimness effect on the
id:propertiesTablesection?
Apologies for my lack of expertise in CSS. Thank you Stack Overflow community for your help!