CODEWITHSUNDEEP
htmlcssangularvmware-clarity
Roshan Nalawade
Roshan Nalawade

Reputation: 182

Reduce spacing around buttons in UI

I am using VMware clarity for UI and wants to reduce this spacing on left and right side of buttons i.e PDF button, ZIP button. I tried making padding as 0, and even negative padding but its not working. Below is the code:

<button type="button" class="btn btn-sm" style="margin: 0%; padding: 0%;" (click)="pdf_report(hist)">
      <clr-icon class="is-solid" shape="file"></clr-icon>PDF     
</button>

Can someone tell me how can I do this. enter image description here

Upvotes: 0

Views: 215

Answers (1)

Foxlab
Foxlab

Reputation: 932

It seems that your elements are displayed according to flex behavior. First you should take your dev tool to find where the styles about button.btn.btn-sm element are implemented. If you cannot change that, you can try to override it with important property by adding in the page/element/view your css code like this :

  button.btn.btn-sm{
      display:inline-block!important;
      flex:none!important;// this will break the flex behavior
      padding:0!important;
      width:auto;
    }
<button type="button" class="btn btn-sm" style="margin: 0%; padding: 0%;" (click)="pdf_report(hist)">
      <clr-icon class="is-solid" shape="file"></clr-icon>PDF     
</button>

Upvotes: 1

Related Questions