CODEWITHSUNDEEP
csstwitter-bootstrap
Jobacca
Jobacca

Reputation: 191

Bootstrap Panel-Title: Having a title text with ellipsis and buttons on right side

If the text is (too) long, the button is shifted down. I would like to have:

Is this possible?

.panel-heading h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
With short text it works great!
            <button class="btn btn-default pull-right">
                New
            </button>
        </h3>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
But with long text, the button is lower: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            <button class="btn btn-default pull-right">
                New
            </button>
        </h3>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        Panel content
    </div>
  </div>

Upvotes: 1

Views: 4217

Answers (1)

MattD
MattD

Reputation: 4420

Add pull-left to your h3 tags.

<h3 class="panel-title pull-left">

Set a width and padding-top to your CSS. The width prevents the h3 content from taking up the full width of the panel (adjust to your liking), and the padding-top pushes it down a bit so it's more inline with your button.

.panel-heading h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    width: 75%;
    padding-top: 8px;
}

Move the button outside of the h3 tag.

<h3 class="panel-title pull-left">With short text it works great!</h3>
<button class="btn btn-default pull-right">New</button>

Here's the results of everything in a Code Snippet bellow.

.panel-heading h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  width: 75%;
  padding-top: 8px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title pull-left">
With short text it works great!
            </h3>

    <button class="btn btn-default pull-right">New</button>
    <div class="clearfix"></div>
  </div>
  <div class="panel-body">Panel content</div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title pull-left">
But with long text, the button is lower: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

        </h3>

    <button class="btn btn-default pull-right">New</button>
    <div class="clearfix"></div>
  </div>
  <div class="panel-body">Panel content</div>
</div>

Upvotes: 3

Related Questions