I am trying to print a page with an <aside>. I'm also using Bootstrap 3.
I've added hidden-print to the aside like this:
<aside class="main-sidebar hidden-print">
However, when I print with Chrome, the space used by the aside is still shown?
How do I make it "disappear" and the rest of the content stretch to fill all the available space when printing?
I'm using the AdminLTE template, you can see a demo here:
https://almsaeedstudio.com/themes/AdminLTE/index2.html
Notice that if you expand the side bar (the default when opening the page) and do a print preview, the side bar content isn't shown, but their is a blank area. I want to make the body content fill the entire printed page.
Also, interestingly enough IE11 and FF appear correctly, it is just Chrome that is failing.
Related
Theme template: Porto (The work items on the right are aligned with the top of the viewable portion of the page). when selecting 'view all' on the left menu.
Site using the above template: DMMBlitz (The work items on the right are NOT aligned with the top of the viewable portion of the page), when selecting 'view all' on the left menu.
I've looked through https://getbootstrap.com/docs/5.0/utilities/spacing/ and tried about every single combination there is.
But I can't get a site to apply the correct spacing to the right slider work items as it is on the template, even though the bootstrap spacing appears to be the same.
What bootstrap spacing is required to fix this, and apply the correct spacing to the right side page items so it's spaced on the DMMBlitz site as per the template in use?
Try to add data-hash-offset="100" rather than data-hash-offset-lg="100" on view all <a> tag, may be it works.
I am testing a free Bootstrap template, and I can't fix an issue that I've found with it: the Header element appears to be wider than the page content, and makes a scrollbar appear at the page, when viewed in a Mobile (400x283) viewport (in Chrome Developer Tools):
https://distracted-jepsen-8ac7db.netlify.app/
Template code: https://github.com/tonysepia/so-theme
I have gone through the following steps to investigate the problem:
Used the Element Selection tool in Developer tools to identify the exact element that is causing the page to grow wide:
The offender is within the <header> tag, as expected
However, none of the Styles that I disable in the Developer Console seem to be able to remove the scrollbar at the bottom of the page!
Questions: What is the next step in troubleshooting such problems, and how can I prevent the header from occupying this extra space and make it align with the page content, without breaking the Desktop view?
hi, i found the issue solution regarding the x axis scroll..its because testimonial slider's navigation buttons are outside the frame ...you can fix this using position:absolute;
I recently wrote a website with ASP.NET MVC 5. The website looks good except that there's always extra white space on the right side of the home page causing a horizontal scroll bar in the browser.
Moreover, the extra space only exists on the home page.
Here is the url
This space appears because you have a too large block in your page like in the screenshot:
So it pushes on the right and create the white space.
EDIT: There is a second one here:
I have a web application that displays a grid and a chart with legend. The application has the ability to print just the summary chart or the chart with the grid data. The grid data is then parsed into a nice printable format for html instead of the table it is in.
When attempting to print this I get flawless results in chrome of course. But IE11 cuts things off at the bottom of every page. It is almost like it is trying to cut off text. About 2-3 lines of text will be cut off for no apparent reason. The amount cutoff seems to depend on where it is within a div. For example if it cuts off in a title it would just be the one line. If it cuts off in the middle of the inner box then it will cut off everything to the end of that box and move to the next section on the next page.
IE11:
Chrome:
Things I have already tried:
Removed all floating for display inline-block
Made sure overlow was always visible
changing margins in print preview of IE11
Removed all styles entirely and there was still cutoff from text.
Any help would be greatly appreciated.
So it took me several days and slowly stripping out everything. It appears that I had one element somewhere up the chain not even in the html being presented that was position:absolute. I just added:
#media print{
*{
float:none!important;
position:static!important;
}
}
and everything worked.
Floats and position absolute apparently ruin print in IE. I recommend never using position absolute for page layout.
Good afternoon people. I sux with css son I wish someone can give me a hand with this. I'm trying to print some kind of html text taken from a html page with a header and a footer. This footer has to stays on the bottom of the page, if is there a second page it should appear on the bottom on that page. Anyway, I got this fiddle to show. The html looks great but when I print the page with a pdf printer, the text overlaps the footer, but only in Firefox, if a run the fiddle on Chrome, it prints the footer below the last paragraph on the second page.
Any idea how to implement this idea?
In your final div, remove the position:absolute, left and top css styles. You are positioning the footer overtop of everything. The value for top would have to be manually adjusted for each browser and you probably want to stay away from that.
Here is an updated fiddle with those css styles removed from your footer div: http://jsfiddle.net/BumbleB2na/F3kSQ/2/