I have added a print button to my page.
<button type="button" class="printBtn">Print This Page</button>
And now I want to remove the element from the print.
I used:
.printBtn{ display:none;}
This works for all other browsers perfectly but for some reason IE does not entirely remove the button when I print the page. The button does not display in print but it messes up the format of my images
example of the images aligned properly not in print preview:
http://i244.photobucket.com/albums/gg5/robasc/Untitled2.png?t=1323881931
example of the images not aligned in print preview and the button is removed using the above css and html:
http://i244.photobucket.com/albums/gg5/robasc/Untitled.png?t=1323881871
I believe the button still exists and is distorting the rest of the elements in the document.
Does anyone know how to fix this issue?
You could try using 'onbeforeprint' and jQuery to remove the button from the DOM (a little heavy handed).
you can try to use
.printBtn{
visibility:hidden;
}
that hides the butten
Related
Hope everyone doing well!
I am making a site in WordPress through Elementor plugin. I am facing a weird issue on the button. Button has line break <br>, even I didn't add it there.
But on the other hand, the button is showing alright in Elementor dashboard, but when I do a live preview, button messed up.
I tried to deactivate all plugins and themes, but it didn't work. Need Help!
You have to assign a custom class tag to the button element, it most likely would be assigned to the div .elementor-button-wrapper, you’ll have to check it with dev tools, then you need to access the theme style on appearance/editor. So you could add the following code:
.class-used br{
display:none;
}
In case the class you assigned to the button is not in a parent tag on top of all you need to eliminate try the same process assigning the class to the column or element that wraps the button. Hope it give you an idea to solve the issue.
button or link padding, width, margin and other style won't work. Because button or link need to add display:inline-block; or display: block; then it will be work. So you need to use that display:inline-block; or display: block;. Hope it helps
I am using the following code to toggle my mobile navigation
html
<p>toggle</p>
I have a function which attaches the proper code/css and just need it to act as a button but not go anywhere (hence the '#').
However I want nothing to show up when it clicks/hover, since the browser usually indicates where the link is going, I don't want that (or anything else) to show
As Michael suggested, why not try using a button instead? Your code would look like this
<button class="toggle-nav"><p>toggle</p></button>
All you'd have to do is change any CSS/JS you have to reference the button instead of an a tag.
You may style the link with pointer-events.
.toggle-nav {
pointer-events: none
}
<p>toggle</p>
My buttons structure is as stranded as it can be:
<a class="button">click me</a>
They work just fine on click.
But, on touch devices, you can get them to work by tapping at the areas around the text inside the button. When you tab in the center "click me" it just does not work.
It is baffling me and I have not been able to find out why.
You can try it live by going to https://plutio.com from your touch device and try to tab on the Get Started button.
It won't work unless you tab around the button text.
Things I tried:
line height
user-select
box-sizing
appearance
pointer-events to none
I got it please use below code:
.button:after, .button:before{
display:none
}
I'm using code from this answer to print a separate page directly from a print button. The user clicks the print button and a url is sent to the print function. The print function loads the separate page into a display:none iframe and prints that iframe onLoad. It works in IE, Chrome but not firefox. In firefox it loads the page into the div but never prints or opens the print dialog. It turns out firefox will not print an iframe if it is set to display:none as below:
<div id="printerDiv" style="display:none"></div>
Is this expected behavior? All other browsers print, I'm thinking of posting on Bugzilla. I tried some css "tricks" to make the div not display where the user can see it, but it's always visible in some way. I'm currently using the below CSS to make the iframe invisible:
#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}
But it's margins still exist and leave a 14px gap once the iframe is generated.
Is there some way to make the iframe not be visible at all without the display:none attribute? Better yet, is there some way to do this without a hack like that?
I even tried using CSS to set the iframe to display:block #print media types and display:none for screen, the JS function still won't print.
If you absolutely position your iFrame off the page, it will still be printable while not being visible to the user.
#printerDiv iframe{
position: absolute;
top: -1000px;
}
I had exactly the same problem. When the display attribute is set to none, Firefox returns 0 for $('#printerDiv').css('height'), $('#printerDiv')[0].style.height or when outerHeight() or outerWidth() are called on the element.
I used z-index for this which does not bind you to use position:absolute.
So, you could have this in the css file:
#printerDiv { z-index: -10; }
Then, when you want to make it visible, just set the z-index using a jquery css() call.
If you control the content of the iframe, make it print itself:
<script type="text/javascript">
window.print()
</script>
For some reason, the text labels are being pushed down below the input tags. Here is the link: http://jurbank.com/lightning-grader/ the issue is at the very bottom of the page click "Get Started!"
see if applying float:left; to your labels fixes it.
Edit
and the second radio button. It needs floated also.
PS nice site btw
You can use display:inline-block; on both the label and the input.
To make it work in IE7, you also add
zoom: 1;
*display:inline;