I am trying to insert page-break-after:always; into the Print.css of a dynamic invoice.
The project is using Bootstrap 3, and I have been testing the printing on Chrome. In the invoice HTML I am using the bootstrap grid system, with bootstrap's 'hidden-print/visible-print'.
The issue I am having is: while using Bootstrap, Chrome is not recognising the page-break-after:always. I have read this is due to 'float:left' and many other factors, but after hours/days of tweaking them, it seems to make no difference. Print-break-inside:avoid; works fine.
I am curious if anyone else has encountered this recently, or if anyone with a superior knowledge of Bootstrap's inner-workings knows the root of this issue definitively?
It seems this is a ongoing problem, that Bootstrap knows about, and that may be fixed in Bootstrap 4. Until then I am stuck. I have no idea now how to achieve a print-break-after with dynamic content while using Bootstrap. Removing Bootstrap is not really an option due to the way the CSS is being loaded in my project.
Thanks in advance.
EDIT: Fixed
The only fix I found was to rebuild the layout by hand after setting:
float: none !important;
position: static !important;
in #media print.
This makes the Bootstrap col-* not work, but now the page breaks do. Pretty brutal fix but at least it worked. The 'row' class of bootstrap still works though, so there's that. Thanks for the help folks.
Related
I don't know if this is a normal error in web developer but if this happen lots of time when you are designing, can you give me advices on how can I fix this issue?
I often happened this to my website. when on the developer view, all css style are perfectly good and fit on the design I like, but when I check on the actual devices, some of designs are missing, and sometimes it didn't show up the exact design and css. I still don't know the reasons why in actual devices are different from the developer view.
the most difficult and stressful thing here, is when you trying to fix the issue but don't know where the error is, because in the developer view all css style and design is perfectly good and fit. so even you are trying to adjust some css code you still don't know if that is the exact css you need to work out.
can anyone give me advices how to work out with this kind of issue?
Usually these kind of errors happend when your styling is fixed. For example, do this:
width: 177px;
Instead of :
width: 177vw;
Also make sure your alignment is on point.
I want to start off by apologizing if this has been asked before. I tried to find the answer but nothing was popping out for me. I am still very new at coding and have hit a wall in my knowledge. I appreciate any help directly or showing me in the right direction.
We are having issues with the layout on different devices. The mobile site looks good, same with the desktop. However, between 768-799px, it distorts the site and then at 800-1300px it is distorted in another way, neither looks good. I have gone through and changed all of the #media queries to try to adjust it but have had no luck. I have attached two pictures of the different issues we are experiencing.
Thank you in advance!
Tablet view 768-799px
Over 800px
It is a little hard to tell exactly what is causing this without any code being posted, but flexbox is a great tool for this. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is a good reference. My understanding is you want to prevent overlapping items, and how I would use this to prevent that is by putting them in separate flexbox items within the same container. There are tons of great YouTube tutorials on this topic if anything in the link is confusing.
I`ve been struggling with this issue for a while now, even my co-workers can't figure this out.
The live version of this app runs on Bootstrap 3 and my local version on Bootstrap 4, the HTML is exactly the same. The font on Bootstrap 4 looks so much blurry than Bootstrap 3. I`ve tried all kinds of font rendering styling, but none solved the problem.
Bootstrap 3
Bootstrap 4
You require a good pair of eyes to see the difference, but believe me, the difference is visible. Screenshots were made on the same screen.
Anyone an idea?
Thanks in advance!
Bootstrap 4 uses the system UI font.
Reference: https://github.com/twbs/bootstrap/pull/19098/commits/73e5e89e0efb938072ba3b1da5d06d0d0e659db9.
https://github.com/twbs/bootstrap/pull/19098
You might want to change back to the regular one if you think it's blurry.
You need to check for all the browsers (maybe it's just a browser thing)
Also you need to check your own css. However, have a look here: https://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3
Seems to be only happening in Chrome. I guess I`ll have to deal with it. Thanks all!
I am having some trouble on this and can not figure it out on my own. I am not any kind of coder just dabbled in it a few times starting in 1998. I am trying to design a website for a friend of mine using bootstrap 3.3.4 for the first time. After getting it online I realized it is way to wide on Iphones. It shows about 50% padding on the right side. You have to zoom in to use view the website correctly. Can anybody give me any input on what can be causing this? I cant find a cause anywhere. On the desktop version it works perfectly even when I resize the window. It is a little to wide on android also but is not near as noticeable as it is on IOS. The website is up at
This link
Thank you for any help
It's difficult to tell exactly what is wrong as I don't have an iPhone. But some observations:
You are loading Boostrap javasript in the head, then loading jQuery and Bootstrap js again at the bottom. Remove the one from headas it's giving a console error.
In the footer, your row has as it's child element a class of col-me-6 which I suspect is a typo. Also it has an inline style of width: 100% which is not advisable - use the grid system to control widths.
Finally, and most likely your problem, in the #portfolio container, your first row has some invalid contents. Only a col-* can be a child of a row. You also have a nested row which is screwing up the margins and giving you the extra wide window.
I'm having serious problems with CSS floats in this wordpress theme in IE6/7:
http://032b4a6.netsolhost.com/WordPress/
This is the first WP theme I've coded, and while I've learned some great lessons for the future, the code is inelegant.
It works fine in modern browsers, but it is highly likely that a large number of visitors to this site will not have updated browsers.
It seems to me that there is a core issue that is repeated throughout the styling and if I can discover what that is, then I'll be a good bit closer to fixing the theme.
I found this page, which seems to offer some suggestions but, ultimately, makes my task sound impossible. Are there other resources or common suggestions that are offered for fixing cross-compatibility float issues with IE?
Even more importantly, if you are able to look at the site in IE6 or IE7, do you have any specific suggestions for how I might fix the floating issues?
I'm not sure it is an issue with the floats.
It appears that in your HTML code you may not have closed off the "sidebar" div before adding the "sidebar-alt" div. This means the "sidebar-alt" and "content-article" divs are contained in the "sidebar" div which only has a width of 120px - hence the reason they are all squashed up on the left.
To resolve the problem with the "Popular Images" and "Related Pages" headers, you could look at using a background-image within a div.
To resolve the nav bar, you need to remove the height and width from the 'a' tags.
I hope this helps fix your issues.