Currently utilizing md-button with text inside
An issue arises in low resolution where the text gets cut off, struggling to find a suitable solution
If anyone has any suggestions on how to resolve this problem, please share.
I have included screenshots in both high and low resolutions as well as the corresponding css and html code
<md-dialog id="new_test_draft_dialog" flex=40 flex-md=50 flex-sm=60 flex-xs=80>
<div>
<div layout-padding>
<h2>Save Changes?</h2>
<div style="padding:5px;" layout-padding>
<div layout="row" layout-align="center center">
<md-button ng-click="draftDialogService.cancel()" class="button_type_1 active">Continue</md-button>
<md-button ng-click="draftDialogService.hide()" class="button_type_1 active">Discard</md-button>
<md-button ng-click="draftDialogService.hide(saveDraft())" class="button_type_1 active">Save draft</md-button>
</div>
</div>
</div>
</div>
</md-dialog>
The css:
/* Buttons */
.button_type.md-button,
.button_type,
.button_type_1 {
border: 3px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 5px 5px;
color: #fff;
display: inline-block;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
word-wrap: break-word;
}
https://i.sstatic.net/3P6No.png https://i.sstatic.net/JrwSh.png