3

I've tried various css combinations but I'm only going to live so long and I'd rather someone help me then spend the rest of my life on this problem!

I have accordion panels on a page but client wants me to provide a .pdf file of the site and therefore the panel content needs to show. I've tried various code suggestions from various sites and cannot get the panels to expand and show/print the contents either with a regular print command or print via Adobe Acrobat Pro XI. Trying to print within Acrobat via "print webpage" command has same result.

I'm pretty sure it is a mistake in my css but I'm a bit of a newbie.

Thanks for any help in advance! The code:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Print Example Bootstrap 3 Accordion</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
@media print {
.Accordion {
  overflow: visible !important;
}

.AccordionPanelContent {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
}
.collapse {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
}
}
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Twitter Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development.</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc.</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
Bob22
  • 109
  • 13

1 Answers1

2

I know this is 5 years old but the only way I finally got my panels to show up is by using this code in my header (between the head tags):

<style>
@media print {
    .panel-body{
        float:none;
    }
}
</style>
James E
  • 21
  • 2