I am using GWT/GXT.
i have used GWT's grid and each row is highighted in background color using CSS. but applied css is not printed in printed page. how can i print with css?
I am calling Print functionality as below:
Print.it("<link rel='StyleSheet' type='text/css' media='paper' href='mainApplication.css'>", DOM.getElementById("myId"));
in mainApplication.css i placed style as below:
#media print {
print_background {
background-color: #EBECE4 !important;
}
}
is my CSS style correct? Please help me.
in the code :
i created a horizontal panel and added GWT grid to it as below.
HorizontalPanel recordsPanel = new HorizontalPanel();
//GWT grid is created and the same is added to recordsPanel
recordsPanel .add(grid).
i applied css style for grid rows as below:
recordsGrid.getRowFormatter().addStyleName(i, "print_results_background");
Now i want to print the records with css style.
Thanks!
You CSS style isn't correct for a trivial issue: lack of dot (.) before print_background class. Correct code is:
#media print {
.print_background {
background-color: #EBECE4 !important;
}
}
paper is not a valid value for the media attribute. Correct your link tag as follows:
<link rel='stylesheet' type='text/css' media='print' href='mainApplication.css' />
Ignoring other syntactic mistakes as mentioned by other posters, please refer to RAS's comment on the question also (regarding the differing class name).
Reference
Media Types on W3C
I think you are missing in the css to specify if print_background its an id # or a class .
Related
I have created a simple grid with one column:
public MyGrid() {
addComponentColumn(this::getIcon).setClassNameGenerator(i -> "icon-img");
setItems(/** some items */);
setClassName("sidebar-grid");
}
And I have a css theme called mangaTheme. I use it like this #Theme("mangaTheme"). In the mangaTheme folder I have styles.css file with the following content:
.icon-img {
padding: 0;
}
.sidebar-grid {
width: 102px;
margin: auto;
margin-left: -30%;
}
The sidebar-grid css properties are applied properly as the grid is moved, but the icon-img properties are not applied whatsoever:
The classnames are applied:
What am I doing wrong or missing? I have also read this guide: https://cookbook.vaadin.com/dynamic-grid-cell-styling
EDIT: After configuring my workspace as was mentioned in the answer this is the resulting structure, but it still does not seem to function properly.
What you're missing is that the cell <td> element is inside the shadow DOM of the vaadin-grid component, and thus cannot be styled with global CSS. To style parts of components that are inside the component's shadow DOM, you need to inject the CSS into the component.
In the Cookbook example, this is done through the themeFor parameter in the annotation that loads the stylesheet:
#CssImport(themeFor = "vaadin-grid", value = "./recipe/dynamicgridcellstyling/dynamic-grid-cell-styling.css")
In your theme folder, however, you can do the same thing by putting that CSS in a stylesheet called vaadin-grid.css in the components subfolder, i.e.:
themes/mangaTheme/components/vaadin-grid.css
Another thing you're missing is that the classname is applied to the <td> cell, but the padding is on the vaadin-grid-cell-content element slotted into the cell, not the cell itself, so you need to rewrite your selector:
.icon-img ::slotted(vaadin-grid-cell-content) {
padding: 0;
}
(The sidebar-grid CSS class works fine as-is because it's applied to the vaadin-grid root element, which is in the page's regular DOM.)
I'm new in vaadin development and i hope someone can help me. I just created a grid table with a model and everything works fine. But now, i want to change the background color of the selected row. I figure out, that i have to create a theme. I found this in the Vaadin Forum: https://vaadin.com/forum/thread/17867059/how-to-set-selected-row-opacity-in-vaadin-grid
This is what i have already done:
I created a html class with the code from the link. I called this class grid-selection-theme.html
I put this class into src/main/webapp/frontend/styles/grid-selection-theme.html
In the java file with the Grid, i added the import: #HtmlImport("frontend://styles/grid-selection-theme.html);
I added the theme to the grid: mygrid.addThemeName("grid-selection-theme");
Here is the code from the other thread in the forum:
<dom-module id="grid-header" theme-for="vaadin-grid">
<template>
<style>
:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
background-color: rgba(255, 0, 0, .50);
}
</style>
</template>
</dom-module>
But it does not work.
This seems to work fine for me, what is your version of framework?
In case you are using Vaadin 14, you would need to place styles into .css file instead and import the file using #CSSImport
My style file gridStyles.css contains:
:host([theme~="grid-selection-theme"]) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
background-color: red;
}
Class where grid is used has this import defined:
#CssImport(value = "./styles/gridStyles.css", themeFor = "vaadin-grid")
Grid has theme name added
I've change a host selector to reflect a theme attribute: in case you have multiple grids on the same page, then style will be applied only to the one having mygrid.addThemeName("grid-selection-theme");
Output looks like this:
I need to print an html page using jee web services or javascript. But how can i change it(add an image) before printing it?
The right way to do it is to have css definitions that target your page for printing to simplify the styling and remove unwanted elements, or in your case add elements. Or just use jQuery to add the image
//Jquery solution
$("div.selector").html("").append("<img src..... />");
//CSS styles
<style tyle="text/css">
<!--
#media screen
{
p.bodyText {font-family:verdana, arial, sans-serif;}
}
#media print
{
p.bodyText {font-family:georgia, times, serif;}
}
#media screen, print
{
p.bodyText {font-size:10pt}
}
-->
</style>
I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?
Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.
<h:outputLink id="lnk" value="#">
<p:printer target="tbl" />
<p:graphicImage value="http://www.primefaces.org/showcase/images/print.png" />
</h:outputLink>
I didn't find any suitable attribute in the <p:printer> tag.
Update: sorry, nevermind the <p:printer> can be used on a <h:dataTable> as well, so you can also just answer the second question only.
Both qustions are answered with CSS #media print rule. It allows you to specify CSS styles which are specific to printed output. You can embed those rules in a normal CSS stylesheet file or <style> element the usual way.
I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?
Lookup the classname of the <p:dataTable> and override it in your #media rule:
#media print {
.primeFaces-dataTable-className {
border: 0;
margin: 0;
padding: 0;
background: none;
color: black;
}
}
There are likely more, I don't know it all from top of head, you should be able to check using Firebug or Chrome developer tools what classname is been used and which properties are all been set so that you know which you should reset to 0, none or some other default.
Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.
Use CSS.
As per CSS 2.1, you can specify it as follows:
#media print {
#page {
size: landscape;
}
}
This has however browser specific impediments, it's not supported in FF and in MSIE <=7. For workarounds, check the accepted answer of this question: Landscape printing from HTML
I'm working on an Android app, which loads a HTML page and shows it in a webview.
The problem is I want to add my custom css (the loaded HTML hasn't any CSS or link to a css). How do I add the custom css to the HTML code using jsoup?
I cant modify the html.
And how does the webview can open it afterwards?
Thank you
Several ways. You can use Element#append() to append some piece of HTML to the element.
Document document = Jsoup.connect(url).get();
Element head = document.head();
head.append("<link rel=\"stylesheet\" href=\"http://example.com/your.css\">");
Or, use Element#attr(name, value) to add attributes to existing elements. Here's an example which adds style="color:pink;" to all links.
Document document = Jsoup.connect(url).get();
Elements links = document.select("a");
links.attr("style", "color:pink;");
Either way, after modification get the final HTML string by Document#html().
String html = document.html();
Write it to file by PrintWriter#write() (with the right charset).
String charset = Jsoup.connect(url).response().charset();
// ...
Writer writer = new PrintWriter("/file.html", charset);
writer.write(html);
writer.close();
Finally open it in the webview. Since I can't tell it from top of head, here's just a link with an example which I think is helpful: WebViewDemo.java. I found the link on this blog by the way (which I in turn found by Google).
Probably the easiest way is to search and replace on the HTML text to insert your custom styles, before loading it into your WebView. I do this in my app BBC News to restyle the news article page slightly. My code looks like this:
text = text.replace("</head>",
"<style>h1 {font-size: x-large;} h1, div.date, div.storybody, img {margin:4px; padding:4px; line-height:1.25;}</style></head>");
See how I search and replace on the end head tag (including my own </head> tag in the replaced segment. This ensures that the new snippet goes in the right pace on the page.
There a a few ways to include ccs in html
Tis i use if you have it stored as a external file:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
If You want to put it stight i the html file:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Or if you wnat to modify a singel tag:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
*Edit
Any of thees examples shouldn't have any problem whit displaying.
Ref: W3 Schools CSS