Button size becomes too small when it is empty

Issue

When there is no text, the button collapses (becomes too small). I am using angular model to bind to button text:

<button type="button" class="btn btn-primary" ng-bind="vm.buttonText" tooltip="{{vm.tooltipText}}" ></button>

I donot want to add any CSS styles to correct it, but I want to add a space( ) character when button has no text. Going through some other similar issues, I came accross ng-bind-html, which involves ngSanitize as dependency. Is all that required to do this, or is there any easier way.. Again, my requirement is to show space character as button text when text is empty, and this text comes from vm.buttonText .

Solution

You could use a conditional bind:

<button type="button" class="btn btn-primary" 
        ng-bind="vm.buttonText ? vm.buttonText : '&nbsp;'" 
        tooltip="{{vm.tooltipText}}" ></button>

Answered By - klasske