CODEWITHSUNDEEP
javascripthtmlcss
Blaine
Blaine

Reputation: 1

Alignment in panel with radio button

I'm using this to display several products and have it working correctly except that I'm trying to get my subtitle to line up with the product title above it.

I want the Title on the first line and the Sub Title on the second line but do not want the Sub Title to wrap under the radio button.

Also would like to vertically center the radio button for the panel heading row.

<div class="pull-right">
    Some image or <br />
    images will go <br />
    over here.
</div>
<div class="panel-group pull-left" id="products">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber1">
            <h4 class="panel-title">
                <div>
                    <input type="radio" name="specs"> Some Product Title #1<br />
                        Some Product Subtitle
                </div>
            </h4>
        </div>
        <div id="partnumber1" class="panel-collapse collapse">
             <div class="list-group">
                 <ul class="list-group">
                     <li class="list-group-item">Some product data</li>
                     <li class="list-group-item">Some product data</li>
                </ul>
             </div>
        </div>
        <div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber2">
            <h4 class="panel-title">
                <div>
                    <input type="radio" name="specs"> Some Product Title #2 <br />
                        Some Product Subtitle
                </div>
            </h4>
        </div>
        <div id="partnumber2" class="panel-collapse collapse">
             <div class="list-group">
                 <ul class="list-group">
                     <li class="list-group-item">Some product data</li>
                     <li class="list-group-item">Some product data</li>
                </ul>
             </div>
        </div>
    </div>
</div>

https://jsfiddle.net/blaine109/um7m89hp/

Upvotes: 0

Views: 76

Answers (3)

Popnoodles
Popnoodles

Reputation: 28409

Demo

Use this CSS

.panel-title {
    cursor: pointer;
    position: relative; /* so that child elements remain in this */
}

.panel-title {
    margin-left: 30px; /* pad to leave room for the radio */
}

.panel-title input{
    position: absolute;
    margin: auto; /* margin, top and bottom to vertical align */
    top: 0; 
    bottom: 0;
    left: -30px; /* -ve to the margin to push the radio into the margin */
}

Upvotes: 0

ltodo
ltodo

Reputation: 11

I would like to suggest you to use position absolute for your radio buttons link. If you support modern browsers only you can use 

transform: translateY(-50%)

instead of 

margin-top: -6px; // half of the height of the radio button

Upvotes: 1

cocoa
cocoa

Reputation: 3921

Take out <br /> and make the text inline.

<h4 class="panel-title">
  <div>
    <input type="radio" name="specs">
    <span> Some Product Title #1 </span>
    <span>Some Product Subtitle</span>
  </div>
</h4>

Upvotes: 0

Related Questions