Experiment with removing the style="margin-left: 50%"
property. By applying a 50% margin to the left side of the button, you are essentially taking up half of the screen width. Therefore, trying to fit two buttons with 50% margin each side by side would not work. To resolve this issue, consider adding display: inline-block;
instead.
<ion-row>
<span *ngIf="dado.status == 0" style="display: inline-block;">
Pending
</span>
<span *ngIf="dado.status == 0" style="background-color: #d9534f;
display: inline-block;">
x Cancel
</span>
</ion-row>
Hint: To easily test and modify styles, open the page in a browser like Chrome. Right click on each element, select inspect
, and proceed to adjust styles in real-time to observe the effects. You can also utilize the "computed" tab to view the calculated margins and paddings for each element.
https://developers.google.com/web/tools/chrome-devtools/inspect-styles/