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.)
Related
I want to define all VaadinGrids in my Application with the component variant GridVariant.LUMO_ROW_STRIPES. I don't want repeat the definition on all grid instances as shown below.
grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
Is there any way to do this with a global configuration or something else?
I have tried so far to use the #Theme Annoation to define a theme variant. But this doesn't work.
As already mentioned in the comment, one approach is to create a subclass of Grid, apply the variant to it, and use it instead of the Grid class in your app.
Another option is to apply the CSS with which the variant is implemented to the Grid in your own theme. It's only 4 lines of CSS: https://github.com/vaadin/web-components/blob/master/packages/grid/theme/lumo/vaadin-grid-styles.js#L312-L316
Just remove the [theme~='row-stripes'] parts from the selector, and load that css into the Grid's shadow DOM e.g. by placing it in themes/your-app-theme/components/vaadin-grid.css
One option is to subclass Grid and add the variant in the constructor:
public class MyGrid extends Grid {
public MyGrid() {
addThemeVariant(GridVariant.LUMO_ROW_STRIPES);
}
}
Another option is to copy-paste the variant CSS to your own custom theme, and remove the host selector, so that that styles are not scoped to any variant:
frontend/themes/myapp/components/vaadin-grid.css:
[part~='row']:not([odd]) [part~='body-cell'],
[part~='row']:not([odd]) [part~='details-cell'] {
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
background-repeat: repeat-x;
}
If you're using Vaadin 24 (prerelease at the time of writing), you can use the new recommended way of styling (avoid injecting styles into the shadow root of the component):
frontend/themes/myapp/styles.css:
vaadin-grid::part(even-row-cell),
vaadin-grid::part(even-row-cell details-cell) {
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
background-repeat: repeat-x;
}
I used to gwt 2.5.1, java 1.6.
when used grid,
I want to centerd just grid header.
No data, Only Header.
Source
.getGrid().getColumnModel().getColumns().get(i).setAlignment(HorizontalAlignment.CENTER);
But,
Both are aligned.
So,
What Can I do?
Thank you.
Use DOM inspector and fish out the style that corresponds to your header cell.
If you named your column as "test" then the style may be named something like "x-grid3-td-test".
Add the following to your stylesheet:
.x-grid3-td-test* {
text-align: center;
}
I am trying to align a column in my cell table to the right. Therefore I use the "setHorizontalAlignment" of my column object. The resulting cell is actually rendered with the "align=right", but it is not aligned to the right because the cell contains another div that fills the complete cell.
Is this a bug in GWT or am I doing it wrong?
TextColumn<String> myColumn = new TextColumn<String>() {
#Override
public String getValue(String myObj) {
return myObj;
}
};
myColumn.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
myCellTable.addColumn(myColumn, "anyColumnName");
I know I can also align it right via CSS, but I hope, I can get this approach working because it seems to be the cleaner solution.
You can do it using css and Column#setCellStyleNames().
Sample code:
myColumn.setCellStyleNames("rightAlign");
css:
.rightAlign{
text-align: right;
}
Note: change css as per your requirement
I have the same code, and it renders the same way - with a div element that takes 100% of the width. And the text inside this cell is displayed aligned to the right - as it should. So this is not a GWT bug.
There is another style in your CSS that interferes here. Most likely, you have something like this in your CSS:
td {
text-align: left;
}
I am new to GWT and was learning it through some examples running in Eclipse. In one of those programs for a button I added setStyleName(class) (also checked with setStylePrimaryName()) and added one more style to that using addStyleName(class).
What I expected was that the button should display the css class properties setted using setStyleName()/setStylePrimaryname as this will be the primaryStylename.
But to my surprise if I add another style to button using addStyleName(), that style is getting as the button's style eventhough it is its secondaryStyleName! In such a case inorder to express the primary styleName, I had to add the secondary style Name using addStyleDependentName().
My code sets styles as follows.
final Button sendButton=new Button("Send");
final TextBox nameField=new TextBox();
sendButton.setStylePrimaryName("newButton");
sendButton.addStyleName("secondButton");
And in the css file
.newButton{
display:block;
font-size: 16pt;
color: black;
background-color: maroon;
}
.secondButton{
color:blue;
margin: 15px 10px 10px;
background-color: olive;
}
The button is always coming in olive background color except in cases where its adding as addStyleDependentName("secondButton") and
case 2: while using addStyleName("secondButton") and then setStyleName("newButton") (As setStyleName() will remove the existing secondary styles). I had also checked the values of primary style name and others using getStylePrimaryName() and getStyleName().
getStylePrimaryName() gives "newButton" and getStyleName() gives newButton,secondButton....So even having a primary style name why its always showing its secondary style property(here secondButton) added through addStyleName()?
*Please note: I have tried this on a text box as follows and its expressing the color mentioned under primary style as expected*
final TextBox nameField=new TextBox();
nameField.setText("---Enter Name Here---");
nameField.setStylePrimaryName("textStyle");
nameField.addStyleName("myText");
nameField.addStyleName("bigText");
and the CSS is as follows
.myText{
color:blue;
}
.bigText{
font-size: large;
}
.textStyle{
color:maroon;
text-shadow: aqua;
}
A thing noticed was that unless we are not adding the secondary styles as addStyleDependentName(), the properties are displaying in the order in which class names occur in CSS...That is, if the primary style name definition comes after secondary ones, primary gets displayed, else the secondary ones...The difference can be noted changing the order in which classes are defined in CSS
So in my button properties, when i changed the order to
.secondButton{
color:blue;
margin: 15px 10px 10px;
background-color: olive;
}
.newButton{
display:block;
font-size: 16pt;
color: black;
background-color: maroon;
}
the button color is getting as maroon. If the secondary styles are added as addStyleDependentName(), the primary style is expressed irrespective of the order in CSS
As per Docs :
Adds a secondary or dependent style name to this object.
After you set the setStyleName() or setStylePrimaryName() the addStyleName() will add another style,which you passed through the argument
The style primary name is the one style dependent names add a suffix to. Otherwise it's just a style name, and the CSS rules apply (GWT can't do anything around that, it's just HTML+CSS+JS in the end in the browser)
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 .