I'm using DASH app on Heroku that requires user to print out the page in PDF. I'm looking to 'save to pdf' option in the browser, however, a simple page print contains Div elements that are undesirable such as buttons. I'm using DASH BootStrap Components but I don't see any .d-print-none (Display in Print) options in their documentation. Is there a way I can hide div elements on printing? Apologies for the basic question.
You could give each item you want to hide a certain className, and then set up a stylesheet with something like this:
#media print {
.print-class {
display: none;
}
}
You can set the class_name property of your div to d-print-none:
html.Div("YOUR CONTENT HERE", class_name = "d-print-none")
https://getbootstrap.com/docs/4.0/utilities/display/
Related
Inside vaadin-grid.css I managed to get the #table element which contains the grid's rows
and with for example
#table th {
backround-color:green;
}
I can change its color.
Now I need to do that only when the page is printed.I tried adding inside vaadin-grid.css
#media print {
#table th {
backround-color:green;
}
}
but that has no effect.Note that I print the page using javascript print().
I added an id="viewfgrid" (as seen in the screenshot) to the enclosing grid and with that now when I add
inside shared-style.css
#media print {
#viewfgrid {
outline:green;
}
}
I can access and change the grid when printing.
However I can't access the inside table with the rows.I tried various variations like
#media print {
#viewfgrid #table {
background-color:green;
}
}
#media print {
#viewfgrid :host > table {
background-color:green;
}
}
but no effect.
How can I access that table ?
Also as a secondary question why can I access #table from within vaadin-grid.css without prepending :host ? when I do that , it has no effect
thanks
I’m not sure why #media print would not work from within the Grid’s shadow DOM styles. Did you try in different browsers? I wonder if there’s some browser bug/limitation here, similar to the fact that you can’t define a #font-face inside shadow DOM.
Also as a secondary question why can I access #table from within vaadin-grid.css without prepending :host ? when I do that , it has no effect
The host selector targets the same element as the #viewfgrid ID. To select a host element with a specific ID, you can use :host(#viewfgrid) inside the shadow DOM styles.
Notice, that you should not rely on any ID, class name, or raw tag name selectors when styling Vaadin components (for example #table or th. Those are considered internal implementation details / private API, and can change in any release. You should only rely on the :host(...) and [part~="..."] selectors and state attribute selectors (for example, [focused]).
If there really is a limitation in using #media print inside shadow DOM styles, I think your best option is to use the ::part() selector, which allow you to style named parts inside the shadow DOM from the outside/light DOM styles. That is actually a more robust method than relying on injecting styles into the shadow DOM (via the frontend/mytheme/components/vaadin-grid.css file).
styles.css:
#media print {
#viewfgrid::part(cell) {
background-color: green;
}
}
The API docs show all available parts of the Grid (look for the "Styling" section): https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha3/#/elements/vaadin-grid
Grid is by design not very printing friendly as it has been designed for "infinite vertical scrolling". You wont for example have headers and footers per page. If you want to include "report" functionality to your application, it is better approach to create separate report view that is designed printing friendly instead of screen use. This will allow you to use different layouting and components in it. You can for example generate multiple Grid's for each page. Or use BeanTable component from Directory, which generaters HTML Table without shadow DOM.
Because apparently you can't access the shadow dom from CSS when there's no 'part' tag on the element,as is the case with this table,I got it by using Javascript as in :
UI.getCurrent().getPage().executeJs("const tabledom = document.querySelector(\"#viewfgrid\").shadowRoot.querySelector(\"#table\");
tabledom.style.cssText+='.....' "
So now this snippet is called when the user clicks on a Print button and you can do whatever with the element's style.In my case I flatten the table so that it can be printed without the scrollbar intervening.
I tried to convert this html resume to pdf and print it but as you see there is a problem in template after changing. For example compare skills in both html version and pdf version.
This is Github repo of this project: https://github.com/xriley/DevResume-Theme
And this is a sample of HTML file: https://themes.3rdwavemedia.com/demo/devresume/
How can I fix it for ever?
I need this: https://themes.3rdwavemedia.com/wp-content/uploads/2019/04/DevResume-Sketch-Template-PDF-Preview.pdf
Solution 1 - Without Coding:
You can select margins as custom from more settings to make changes for each page accordingly.
Then you can drag these blue dotted borders to adjust text based on your need.
As i have drag thelower border upward to make senior developer text to appear in next page.
Solution 2 - With Coding:
Simply adjust margins for each page from solution 1.
Then by using the #page in your CSS. You can modify margins when printing a document. You can't change all CSS properties with #page. Only few properties such as margins while printing the page etc.
#page:first { <----- first here is refering to only First Page
margin-left: 0.75cm;
margin-top: 0.25cm;
margin-bottom: 0.25cm;
margin-right: 0.75cm;
}
If you want to apply margins on all page then simply do this:
#page { your margins values }
You can read more about #page property here.
I'm using CKEditor and I would like to hide a button in keeping the functions. In other words I would like to hide the Image button while keeping all existing images displayed in
my page
I tried to use the config.js file:
- config.removeButtons = 'Image';
- config.removePlugins = 'elementspath,image';
But all existing images in my html page disapeared.
I have the same trouble withe the Table button.
Use CSS:
.cke_button__image, .cke_button__table {
display: none !important;
}
Is there a way to adapt CSS (add some keyword) for copying rendered HTML page?
Like there is way to make CSS for mobile device or for printing I need similar thing for copying for pasting in Word or Excel.
Example is:
I have a page that I need to copy and paste to Word for report but on that page there are input tags that I don't need in report.
There is a JS hack for this but is there some CSS way to do this?
I'm a bit confused with your question.
You could copy and paste and delete the input tags manually. Have you tried including a CSS print media query to your code and excluding the input boxes?
#media print {
/* something like this */
input {display:none;}
}
#L_A_W
I did tired that but when I do "Select All" (Ctrl+A) on page and Paste it to Word I get input tags pasted in Word document that I don't need there.
When I print the page, I can print it to PDF (for example) without input tags, css "#media print" is working for this, but I need to edit report data before sending report.
I need:
#media copy {
.some_element {
display: none;
}
}
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!