CODEWITHSUNDEEP
csstwitter-bootstrap
Chris Hammond
Chris Hammond

Reputation: 2186

Cannot get collapse panel icon to line up - Bootstrap CSS

I am having trouble trying to line up the "open/close" icon on a Bootstrap Collapse panel... it is always either above the title text or below it... I want it all on one one

Here's an image of what what I get and what I want..

enter image description here

...And here's the markup of the BAD version...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
    <style>
        #Basket {
        }


            #Basket .panel-title .trigger:before {
                content: '\e114';
                font-family: 'Glyphicons Halflings';
                vertical-align: middle;
                text-decoration: none;
                color: green;
            }

            #Basket .panel-title .trigger.collapsed:before {
                color: green;
                content: '\e080';
                text-decoration: none;
            }
    </style>
    
    <title></title>
</head>
<body id="Basket">
    <div class="panel-group">
        <div class="panel panel-danger" style="padding: 0px;">
            <div class="panel-heading" style="padding: 5px;">
                <div class="panel-title" style="padding: 20px">
                    <a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed">
                        <table style="width: 100%">
                            <tr>
                                <th style="padding: 20px; text-align: left;">Data Item 1</th>
                                <th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
                                <th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
                            </tr>
                        </table>
                    </a>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    Just some plain old text
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Upvotes: 0

Views: 31

Answers (2)

Vetrivel Pandiyarajan
Vetrivel Pandiyarajan

Reputation: 646

I did it please run the code.

I juts used the tag inside of the "td"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
    <style>
        #Basket {
        }


            #Basket .panel-title .trigger:before {
                content: '\e114';
                font-family: 'Glyphicons Halflings';
                vertical-align: middle;
                text-decoration: none;
                color: green;
            }

            #Basket .panel-title .trigger.collapsed:before {
                color: green;
                content: '\e080';
                text-decoration: none;
            }
    </style>
    
    <title></title>
</head>
<body id="Basket">
    <div class="panel-group">
        <div class="panel panel-danger" style="padding: 0px;">
            <div class="panel-heading" style="padding: 5px;">
                <div class="panel-title" style="padding: 20px">
                    
                        <table style="width: 100%">
                            <tr>
                                <th style="padding: 20px; text-align: left;"><a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed"> &nbsp &nbsp Data Item 1</a></th>
                                <th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
                                <th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
                            </tr>
                        </table>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    Just some plain old text
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Upvotes: 1

Vetrivel Pandiyarajan
Vetrivel Pandiyarajan

Reputation: 646

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
    <style>
        #Basket {
        }


            #Basket .panel-title .trigger:before {
                content: '\e114';
                font-family: 'Glyphicons Halflings';
                vertical-align: middle;
                text-decoration: none;
                color: green;
            }

            #Basket .panel-title .trigger.collapsed:before {
                color: green;
                content: '\e080';
                text-decoration: none;
            }
    </style>

    <title></title>
</head>
<body id="Basket">
    <div class="panel-group">
        <div class="panel panel-danger" style="padding: 0px;">
            <div class="panel-heading" style="padding: 5px;">
                <div class="panel-title" style="padding: 20px">
                    <table style="width: 100%">
                        <tr>
                            <th style="padding: 20px; text-align: left;"><a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed"></a>&nbsp &nbsp Data Item 1</th>
                            <th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
                            <th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
                        </tr>
                    </table>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    Just some plain old text
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Upvotes: 0

Related Questions