Hanks Hanks - 2 months ago 13
CSS Question

change the height of ui.bootstrap.alert

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.
enter image description here

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

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


enter image description here
But now the sentance is not in the middle of the alert anymore.

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

Answer

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