Search code examples
cssangular-ui-bootstrap

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!

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