Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accordion Print Styles #12130

Closed
iversoncreative opened this issue Jan 6, 2014 · 6 comments
Closed

Accordion Print Styles #12130

iversoncreative opened this issue Jan 6, 2014 · 6 comments
Labels

Comments

@iversoncreative
Copy link

How does one force all collapsed elements in an accordion to expand for printing?

Example code below:

<div class="panel-group" id="accordion-help">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-help" href="#customer-support">Customer Support</a></h4>
        </div>
        <div id="customer-support" class="panel-collapse collapse">
            <div class="panel-body">
                <h5><a data-toggle="collapse" class="faq" data-parent="#customer-support" data-target="#customer-support-q1"><i class="icon-question-sign"></i> How do I contact Customer Support?</a></h5>
                <div id="customer-support-q1" class="collapse">
                    NEED TO SEE THIS WHEN PRINTED
                </div>
            </div>
        </div>
    </div>

</div>

My CSS for this is:

@media print {
    .panel-collapse,
    .panel-collapse .collapse {
        height: auto !important;
    }
}

This doesn't seem to work. Any ideas?

@iversoncreative
Copy link
Author

I also added

        display: block;

and it seemed to fix it. Can someone else confirm?

@cvrebert
Copy link
Collaborator

cvrebert commented Jan 6, 2014

An expanded/uncollapsed .panel-collapse has the additional classes .collapse.in (see collapse.js). The corresponding style rules for .collapse.in simply set display: block;.

Not sure if/why your height: auto is necessary. Seems to work without it for me.

@cvrebert cvrebert closed this as completed Jan 6, 2014
@TillerMiller
Copy link

I found that height: auto is necessary when printing after navigating through some of the collapsible elements. When I would expand a section, and then minimize it back down, that section would no longer print unless height: auto was included

@cvrebert
Copy link
Collaborator

@TillerMiller Possibly due to #11099.

@patriciomas
Copy link

In the print view, I'm getting parentheses inside the accordion-heading tag right after the title.
Does anyone know where this is coming from?
accordion-parentheses

@patrickhlauke
Copy link
Member

@patriciomas could you please post this as a new issue, instead of commenting on a closed 4 year old separate issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants