change the height of ui.bootstrap.alert

Question

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

It works okay as following except that it's too big for me.

So I changed the height in CSS and here's the new output

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

But now the sentance is not in the middle of the alert anymore.

How can I properly change the height of the alert? Thanks!

Solution

You will need to change 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

Comments

[Marwelln]

Change line-height to 30 as well.

[Niles Tanner]

plunker link is no good

[Hanks]

Works great! Thanks!