CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Nev Stokes
Nev Stokes

Reputation: 9769

Horizontal Bootstrap Panel

I've been trying to adapt a Bootstrap panel to implement a horizontal version but I'm having trouble getting the panel heading to vertically align with the content in the panel body — I'm assuming it's something to do with clearing the divs.

It's safe to say that front-end dev isn't exactly my forté. I'm sure this is perfectly simple to accomplish but it's currently beating me!

Here's my mark-up:

<div class="panel panel-default panel-horizontal">
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, deserunt, aliquam, inventore commodi at placeat blanditiis quaerat quo fuga molestias ex quos debitis quidem dolor fugit aspernatur iste iusto quibusdam.</p>
    </div>
    <div class="panel-heading">
        <p>Example</p>
    </div>
</div>

And the accompanying CSS:

.panel-horizontal .panel-heading {
    border-bottom: 0;
    border-right: 1px solid transparent;
    border-top-right-radius: 0;
    margin-bottom: 0;
    width: 150px;
}

.panel-horizontal .panel-body {
    float: right;
    margin: 0 0 15px 150px;
    padding-bottom: 0;
}

What am I missing?

Upvotes: 2

Views: 15321

Answers (2)

seyDoggy
seyDoggy

Reputation: 140

EDIT

I made a fully functional panel-horizontal with display: table instead. It's pretty solid: http://jsfiddle.net/seydoggy/9jv5e8d1/

Original message

I know this is an old one, but I was searching for a similar solution and came upon your fiddle. I've just wrapped some panel pretty around columns and come up with this: http://jsfiddle.net/qy96nh5L/

#wrap {
    padding: 2em;
}
.panel-horizontal {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.panel-horizontal > .panel-body {
    background-color: white;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #ddd;
}

<div id="wrap">
<div class="row panel panel-horizontal">
    <div class="col-xs-3">
        <div class="panel-heading">Example</div>
    </div>
    <div class="col-xs-9 panel-body white">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, deserunt, aliquam, inventore commodi at placeat blanditiis quaerat quo fuga molestias ex quos debitis quidem dolor fugit aspernatur iste iusto quibusdam.
    </div>
</div>

Upvotes: 9

Leann
Leann

Reputation: 216

Nev, to get the panel-heading to align vertically next to the panel-body, you have to give both divs a float property. Below is the CSS tweaked. I modified the width on both as well to give you an idea of how the positioning would work. Percentages work great with floating elements. Notice that panel-heading is set to 19% width and panel-body is set to 80% width. Normally, panel-heading would be 20%, but your 1px transparent border pushes the width of the panel-heading over that 20% and forces panel-body to the next line. So to fix this, I just went down 1%. If percentages don't work, just note that if you have two elements floating next to each other, their combined widths cannot exceed the width of the parent element. Also, you need widths on both elements that are floated in order for them to fit on the same "line".

.panel-horizontal .panel-heading {
       float: left;
       width: 19%;
       padding: 0;
       border-bottom: 0;
       border-right: 1px solid transparent;
       border-top-right-radius: 0;
       margin-bottom: 0;
}

.panel-horizontal .panel-body {
       float: right;
       margin: 0 0 15px 0;
       padding-bottom: 0;
       width: 80%;
       padding: 0;
}

Upvotes: 0

Related Questions