CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sch
sch

Reputation: 1388

bootstrap panel-header change height

I'm trying to change height of bootstraps panel-header, if I change the height using this css: 

style="height: 20px;"

The title inside the header will be missplaced

See example on plunker

Why does this happen, and how can I fix it?

Upvotes: 1

Views: 25338

Answers (2)

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

It's not a good idea what you did, but if you still want to stick with it, then you have to change bootstrap's default panel-heading padding too, like this to your panel:

 <div style="height: 20px;padding:0" class="panel-heading">

as you can see in the plunker the font-size is not the most desirable size so I suggest you to use custom class and not bootstraps .panel-heading

Upvotes: 5

Johannes
Johannes

Reputation: 67778

Just don't do that: The height of this element (including all the text in there, also the second paragraph) adjusts automatically to the text (so that ALL text has the background defined in there). If you manually set the height (as you did), the text will still be visible (since overlapping text is shown), but it won't fit the background.

Try adding some text and you'll realize, what I mean.

Upvotes: 2

Related Questions