I've been trying to create a custom styling for a component and it requires printing, the problem is that whatever i want to print comes out duplicate.
I tried to recreate in codepen but I wasn't able to.
This is what I added to css print:
#media print and (color) {
#page {
margin: 5mm;
size: A4 landscape;
}
* {
overflow: visible !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
margin: 0 !important;
padding: 0 !important;
color: #212121 !important;
visibility: hidden;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
}
body,
.section-to-print {
height: auto !important;
}
.section-to-print,
.section-to-print * {
visibility: visible !important;
}
.section-to-print {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
display: block !important;
}
.section-to-print:nth-child(2) {
display: none !important;
}
.vis-timeline {
display: none;
}
core-dialog,
.dialog-container {
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
}
Turns out the problem was that the parent element had "position:fixed", that's the cause of the duplication in my problem.
Related
I'm working on a new version of the project and I'm having some problems with the print CSS style.
here the old project:
https://www.traffwebdemo.co.uk/parking/main.html
STEPS TO PRINT:
Click on the wrench button -> printer button -> choose the template, a modal will open and then you can print on both orientation, it's done with an iframe and a mix of 2 css, one in the main project and one in the iframe itself.
the css print hide everything and show just the modal content when it print, so if you try to print directly on the main page you will have just a white page.
I'm not working anymore with the iframe due to limitation with the map, i'm still calling the html template but then I'm cloning the body of it in the modal and get rid again of the iframe.
here the new version:
https://www.traffwebdev.uk/parking/test.html
Both version of the project use Bootstrap but while the old version calls an iframe and I print the iframe bootstrap is not loaded, the new way get rid of the iframe so Bootstrap is interfering with the print.
I was having problem with the orientation field in Chrome and no second page in all the other browsers but after digging into Bootstrap issues I found that this can be solved overwriting the CSS rule with
#page {
size: auto
}
.flex-class {
display: block;
}
Now I have second page in Firefox and Opera but...sadly our clients use IE11... and I don't have second page in IE
How can I print both pages in IE? It seems that these rules are completely ignores.
#pllegwrapper {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
#pagesplit {
display: block;
page-break-before: always !important;
break-before: page !important;
}
UPDATE
I've applied display: table to the main div that contain the 2 pages and now I can print in IE but not in FF.
Just make your model's position as relative.
http://plnkr.co/edit/fspygnqWhsosqDTds0Og?p=preview
/**Modal Styles for Print**/
#media print {
body * {
visibility: hidden;
}
#print-content * {
visibility: visible;
overflow: visible;
}
#mainPage * {
display: none;
}
.modal {
margin: 0;
padding: 0;
min-height: 550px;
visibility: visible;
/**Remove scrollbar for printing.**/
overflow: visible !important;
position: relative;
}
.modal-dialog {
visibility: visible !important;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
I manage to fix the problem with the code below, #printMod is the bootstrap modal itself, i remove any flex property and float.
Then I've applied display: table to #printMod and #printBody, this last one is the main container inside the .modal-body modal element.
Quite a long work to fix it and just because of Bootstrap.
#media print {
#page {
size: auto;
}
body {
margin:0 !important;
padding:0 !important;
height:100% !important;
width: 100% !important;
}
body * {
visibility: hidden;
}
#printMod,
#printMod * {
visibility: visible;
float: none;
display: block;
flex: none !important;
}
#printBody {
display: table !important;
margin: auto !important;
}
#printMod {
& {
display: table !important;
position: absolute;
left: 0;
top: 0;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
break-inside: auto;
border: none !important;
overflow: visible !important;
}
.modal-header,
.modal-footer {
display: none;
border: none !important;
}
.modal-dialog,
.modal-content,
.modal-body {
display: block;
overflow: visible;
height: 100% !important;
max-height: 100% !important;
padding: 0;
border: none !important;
}
#plwrapper,
#pllegwrapper {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
#pagesplit {
display: block;
page-break-before: always !important;
break-before: page !important;
}
}
}
I am trying to get a section up and running on my website. I want to add a background image instead of a color. I have tried reading here and other websites and nothing I try seems to work. I am using this section code:
https://codepen.io/ckor/pen/lBnxh
!* {
box-sizing: border-box;
}
ebody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esection {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('https://s15.8cb2jiu3/banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
&:nth-of-type(2n) {
background-color: #D55B79;
}
}
.eintro {
height: 90vh;
}
.econtent {
display: table-cell;
vertical-align: middle;
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
e&:active {
top: 1px;
}
}
efooter {
padding: 1% 5%;
text-align:center;
background-color: #373B44;
color: white;
ea {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
}
I have added this to the code:
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('https://s15.banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
The goal is to add images that are left or right justified and then add some text to the section. I am aiming for a left image then the next box is a right image and so on. I have seen the effect on other websites and it looks good if done correctly.
In order to add background image to any html element you will need the following line added to your css:
background-image: url("pathtoimage");
In your css code there is :
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
this code here will fetch for all section html tags and apply to them the styles.
in here you can even notice the first background-color:#373B44; that is applied to all sections and the second background-color: #FE4B74; that is only applied to sections with that are 2n
for example:
(1st section html element in your page) Section 1 will be color #373B44
(2nd section html element in your page) Section 2 will be color #FE4B74
(3rd section html element in your page) Section 3 will be color #373B44
(4th section html element in your page) Section 4 will be color #FE4B74
and so on
Now in order to add a background-image , all we have to do is add the code I provided above to your section in that way
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
/*added here*/
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
/*added here*/ }
section:nth-of-type(2n) {
background-color: #FE4B74;
}
However, now you have two problems :
1- same background image in all sections (no alternating)
2- the image might be too small , not fit or might be repeated in a bad looking way
so in order to solve problem 1 all you have to do is just the same thing as what happens with background-color . So we just add another background-image under the 2n like so :
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");}
section:nth-of-type(2n) {
background-color: #FE4B74;
/*this will overwrite the other background image for your 2n sections*/
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
In order to solve the 2nd issue , you might want to use the following:
background-repeat:no-repeat; /*removes repetition*/
background-size:cover; /*allows picture to take up whole section space*/
and the final code will look like this
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
To better understand the background properties in CSS , I would really suggest going into the following link :
https://www.w3schools.com/css/css_background.asp
And this link will help you understand the section:nth-of-type(2n)
https://www.w3schools.com/cssref/sel_nth-of-type.asp
The codepen link
https://codepen.io/sara-kat/pen/gKrVpg
Have a good day
There is a really simple solution to this, actually. The link to the image isn't working. You don't have to change anything about the rest.
I gave your second section the class bg and put your code to style that section in your CSS. It works if you use a working link:
Codepen
section.bg {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('//unsplash.it/1200/800');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
I'm using Doxygen v1.8.13 on Windows.
I'm trying to optimize our HTML output. I would like to have the header with the navbar and search input stick on the top of the pages.
Using a custom css I managed to give the needed tags a position of fixed and all is working fine, except for the search results. That div (with an iframe) is falling behind my div.header.
When I move the div.header block inside the div.top block everything works as expected.
But I can't modify this in the header.html template, because the div.header block is not included.
How to solve this?
Here's my CSS, if needed:
/* Make the header fixed at the top */
#top {
position: fixed;
width: 100vw;
top: 0;
background: white;
}
.header {
position: fixed;
width: 100vw;
top: 137px;
}
.header > div.summary {
padding-right: 25px;
}
div.headertitle {
padding: 5px 5px 0 10px;
}
div.headertitle > .title {
margin: 0 2px;
}
div.contents {
margin-top: 180px;
}
#MSearchResultsWindow {
position: fixed;
border-radius: 3px;
padding-right: 2px;
}
#media(max-width:768px) {
.header {
position: fixed;
width: 100vw;
top: 277px;
}
div.contents {
margin-top: 318px;
}
}
I already read these similar questions:
Remove Doxygen prototype header
Provide custom/configurable HTML templates to Doxygen
But they don't provide what I need.
I finally got it working. Instead of using position: absolute I'm now using flex-box. I also needed to add a new div around all other divs.
This is my css code:
html,
body,
#page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 auto;
}
.header {
flex: 0 0 auto;
}
div.contents {
flex: 1 1 auto;
position: relative; /* need this to position inner content */
overflow-y: auto;
}
div.footer {
flex: 0 0 auto;
}
And this is the live website: http://www.mapwindow.org/documentation/mapwingis4.9/index.html
I have a website I am working and the form isn't sitting in the right place it keeps shifting and moving I spoke to tech support they gave me some code it worked for a bit now it's off again can someone please help.
This was the code:
button.et_bloom_submit_subscription {
float: right;
position: fixed;
top: 7px;
right: 310px;
}
.et_bloom .et_bloom_form_content .et_bloom_popup_input {
width: 25%;
}
button.et_bloom_submit_subscription {
width: 21% !important;
}
.et_bloom .et_bloom_inline_form {
left padding: 60px;
}
.et_bloom .et_bloom_inline_form {
margin: 0;
}
.et_bloom .et_bloom_header_outer {
display: none;
}
#media only screen and (max-width:1100px) {
.page-id-453 .et_bloom_form_content {
width: 100% !important;
margin: 0 auto !important;
}
.page-id-453 .et_bloom_form_content .et_bloom_popup_input {
width: 25% !important;
margin-right:2%;
}
.page-id-453 .et_bloom_form_container button {
width: 45% !important;
padding:13px;
top:auto !important;
left: auto !important;
margin: auto !important;
float: right !important;
}
}
And this is the website www.askleewellard.com (form is right below the graphic).
How can I resize only the first image present inside a post with CSS without affecting any other image inside the post. If I use the following code:
#content div.single:nth-of-type(n) img {
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;
It resizes all the images present inside the post.
I have also tried nth-child with no success:
#content div.single img:nth-child(1){
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;}
Here is the Demo
Why not target the image you want like this:
.alignnone.size-full.wp-image-35095 {
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;
}
when you have a class with spaces you target the class in css but you change every space with a dot.
If you want always to target the first image in a post then you can run Jquery:
$( "#content img" ).first().attr('width', '150');
Btw you have an important in your first image and I was struggling why this is not working :P
You could try this:
#content div.single img:first-child {
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;
}
Solved it easily with CSS like this:
.single p:nth-child(2) > img {
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;
}