I'm making diploma which needs to be downloadable.
So I made specific vue component (diploma itself) which is in the dom but hidden with v-show (display: none).
Now I only need that specific component to be printed (or saved as pdf) and not a whole page.
So I cannot initiate window.print(), but I need somehow to sandbox specific component, so I figured I could use hidden iframe and load component there and initiate print on iframe.contentWindow.print().
One problem is I don't see how I can load component in an iframe.
One way would be to use something like
iframe.srcdoc = downloadRef.value.$el.innerHTML;
but I don't have styling this way.
I also tried something along the lines of
iframe.srcdoc = ` ${css} ${downloadRef.value.$el.innerHTML}`;
where css is style tag string with styles, but again not all styles are applicable.
Is there any other way to load vue component into iframe and to render it as such (with vue naturally), or is there any other way to make certain component printable with all necessary styles applied, without using iframe at all?
Thanks in advance.
I think there's an easier way to achieve what you need without using iframe.
What if you could apply a certain css styling for that component, which would make it occupy the whole page and cover all other content
<style>
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
}
</style>
Credit goes to How to make a div fullscreen and atop of all other elements with jQuery?
You would then be able to add a conditional class on your special component:
<special-component :class="{'overlay': isPrintModeEnabled}"> ...
So all that's left is to enable the isPrintModeEnabled property as per your rquirements.
Related
In my NextJS app, I have a /home page in which I need x and y overflow to be hidden. However, I have another /books page in which I need the user to be able to scroll. However, as there is only one global stylesheet in Next and global css selectors like body are not allowed in css modules, I could not find a way to get around this. Any ideas?
Done! Just insert the following into the component:
<style global jsx>{`
html,
body {
overflow: hidden;
}
`}</style>
You already gave the general right answer how to add global stylesheets from specific page or component. However, for this specific case of hiding scrollbar in React application, I can suggest to take a look at useLockBodyScroll from package react-use.
https://github.com/streamich/react-use/blob/master/docs/useLockBodyScroll.md
I have a Wordpress page and I have added a Sidebar widget for an air quality measurement device. The script generated by the device is written looks like this:
<div name="airvisual_widget" key="somecodehere"></div>
<script type="text/javascript" src="https://www.airvisual.com/scripts/widget_v2.0.js"></script>
And this generates a widget that looks like this:
So the layout is very weird and gets off limits and there are not really many layout options on the website that generates that widget code. Is it possible to overwrite or edit the standard layout inside this javascript code? And how can one do that?
I did take a look at the widget code. And was able to change the layout using CSS.
You can add CSS for these classes and use !important to override existing properties of the widget
Once you know the dom structure and CSS selectors, you can add custom css targetting these selectors. For example, in the above screenshot, if you want to change the height of div with class bodyAirvisualWidget, you can add custom CSS like
.bodyAirvisualWidget {
height: 200px;
}
You can choose to add !important to force your css. However you need to be careful as same css selector may be targetting multiple element. In that case you may want to make your css selector more specific like div.className > div.anotherClass > .bodyAirvisualWidget to avoid unintended side effects
If it was a simple html page, you can add CSS directly in a <style> tag or in a CSS file and include css file into your page.
In case of Wordpress, you can add custom CSS via Wordpress CSS editor (My Site → Design → Customize → Additional CSS)
Is there a way to specify css that can achieve the following?
The css of the parent component does not affect the child component
Child component css does not affect the parent component
The child component is the one obtained by API of the external website. At this time, this child component will affect the style of the parent component (I cannot edit the style of the child component).
The main style is read by layout.
It is a style that has a large influence range, and it is troublesome to have each component read by scoped, so I want to avoid it.
I’m not sure if this will work. But you should try using sass. And import the css with a plain css and then use the imported file inside sass. Just like this
<script>
#import 'http://123.com/style.css'
</script>
<script lang=“sass”>
#app {
#include style
}
</script>
If this doesn’t work try with one of these Solutions - Stack Overflow
But I know this is your go to.
I am currently using bootstrap and knockoutjs to display a webpage that has a live preview of some data. For instance, a user enters a title, in a textbox, on the left hand side. Then, the right hand side of the page updates to format that text based on some other settings. So it might be something like <h1>{title}</h1> or it might be <u>{title}</u>. However, all that is requested from the user, at this point, is the title in plain text.
The issue is, as the preview is actually a HTML document created by the users. So, some of the bootstrap CSS overrides the CSS specified by the users. So the above <h1> will inherit bootstraps h1 CSS class, rather than using whatever is in the users HTML template. This means at the time of using the created document, the preview may differ to what is actually happening.
JSFiddle example: http://jsfiddle.net/Piercy/4fcmk/
HTML:
<div class="content">
<h1>Header 1</h1>
<div id="Preview">
<!-- Start Html Template -->
<style>
.header
{
color: red;
}
</style>
<h1 class="header">Header Class</h1>
<!-- End Html Template -->
</div>
</div>
CSS:
.content h1
{
color: blue;
}
The user would expect "Header Class" to be red as they do not know anything about the content css. In my code i am using bootstrap but this shows a simplified version of the issue. Normally, you would just make the CSS more specific but because the user doesn't know about bootstrap (or in the jsFiddle example content) we can't really expect them to modify the CSS.
I need to try figure a way to either stop a certain container (preview div in the jsFiddle) using the stylesheet thats being used by it's parent or figure a way i can modify the bootstrap CSS so that overriding issues are less likely.
Of course, sticking it in an iframe would accomplish this but then I will have issues trying to access and modify the preview.
I am open to all ideas, just want to try find the most appropriate way to deal with this situation. I found this rather difficult to put down on paper so I apologise if it is hard to understand.
To my understanding, there is no way to tell CSS to not inherit styles. However, here's an interesting idea for a workaround.
Take the bootstrap.css file and drop it into your CSS preprocessor of choice (I used LESS).
Next, wrap ALL of the styles with an ID or class of bootstrap like this:
#bootstrap { ...all the bootstrap styles go here. }
Then, save it as a .less file and compile it. Your result will be all the bootstrap styles inheriting from #bootstrap or .bootstrap (depending whether you used an ID or class to wrap bootstrap's styles).
Finally, wrap whatever markup in your template that your users will not be editing in a div and give this div an id of #bootstrap or class of .bootstrap, and include only the bootstrap file we just processed using LESS.
That takes care of the user's CSS not inheriting from bootstrap. However, your users can still write styles that bootstrap will inherit. To get around this, wrap the user's content in an id or class of something like #user or .user and ask them to begin all of their styles with .user > likes this:
.user > h1 {color: red;}
.user > p {font-size: 18px;}
This should separate your HTML template's styles from your users' styles - it just takes a little bit more work from your users.
Here's a jsfiddle to demonstrate:
Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?
I am attempting to add the following to my web page:
http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841
When I used it, the CSS and JS files affect my whole web page.
I don't want this to be happened. I want to add a slider without changing my site totally.
Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?
Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.
If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.
If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:
p {color:pink}
instead, add a prefix, like this:
#menu p {color:pink}
#content p {color:black}
Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.
Not like this:
jQuery('p').slider();
instead, add a prefix, like this:
jQuery('#content p').slider();
You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.