Twitter Bootstrap Question posted in

Bootsrap #sidebar-wrapper takes up space in certain browsers when printing-Twitter bootstrap

I have an issue when printing from a twitter bootstrap appplication.
https://hod-nav.herokuapp.com/members/H0252#
When trying to use the print button, or just file > print, the #sidebar-wrapper still takes up real estate on printed pages.

This only occurs om PC Safari, Mac Safari, and Mac Firefox.

I’m using BS 3.3.6.

I’ve done a ton of things.

• My css is set to media: ‘all’
• I’ve played around with BS print style sheets like so…

    @media print {
     #sidebar-wrapper {
    display: none !important;
    visibility: hidden !important;
    }

• I’ve added the mysterious class=”hidden-print” to the element in question.

• I’m able to hide things that don’t need to be printed with print style sheets like the above.

• I’ve also added additional selectors from the cascade to target the element very specifically.

As you can see from either clicking the print button, or just a basic CTRL/CMD + P, the problem browsers listed above want to keep the 250px+ white space at the left, vs. allowing the main container div with the map in it to print at full width as in other browsers.

Just wondering if anyone else had come across this issue in these browsers or others.

I’m happy to proved additional information.

Thanks in advance for reading and thinking.

Sincerely,
Dick

Tags:

2

Answers


  1. 0

    It’s not the #sidebar-wrapper taking up space in the layout, it’s the left padding of the main element, which you need to disable on print:

    @media print {
  #wrapper {
   padding-left: 0;
  }
}

    This needs to be placed at the end of your styles, to override the #wrapper selector inside @media (min-width: 768px). Alternatively, you could use div#wrapper instead of #wrapper and it will apply regardless of its position in the CSS file.

    And, by the way, none of these ids have anything to do with Twitter Bootstrap.

    Login or Signup to reply.
  2. 0

    Looks like there is padding in your wrapper element ->

    #wrapper { padding-left:250px;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search