Change height ui.bootstrap.alert

Question

I am trying to add ui.bootstrap.alert based on this example: https://plnkr.co/edit/?p=preview .

It works fine, except that it is too big for me.

So I changed the height in CSS and here is the new output

.alert { margin-bottom: 1px; height: 30px; } 

But now the message is no longer in the middle of the alert.

How to change the height of the notification? Thanks!

Answer 1

You will need to change the line-height and padding for this to work

 .alert { margin-bottom: 1px; height: 30px; line-height:30px; padding:0px 15px; } 

http://codepen.io/nilestanner/pen/kkGoNO