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;
}
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.)
Maybe a really newbie's question....
I'm starting learning JavaFX in a FMXL Application using the Scene Builder, by reading this tutorials:
http://docs.oracle.com/javase/8/javafx/get-started-tutorial/fxml_tutorial.htm
So once i applied some changes, an issue with this 2 IDs came up... I might have missed or confused something about them...
Can anyone tell me in which cases they are used one or another?
id you use to set a CSS ID to your Component, for example <Text id="welcome-text" .../> and in your stylesheet you have something like #welcome-text { font-size: 16pt; } so this will be applied to your Text.
fx:id you use if you want to work with your Components in your Controller class, where you annotate them with #FXML Text myWelcomeText.
The fx:id is the identity associated to component in fxml to build a controller, and the id is used for css.
I took a look at an FXML document generated using the JavaFX Scene Builder. You access controls from Java Controller with the fx:id. (edit) I stand corrected, the id does matter.
You can apply css from the FXML document like this:
<Slider id="css_id" fx:id="myslider" styleClass="style_name" .../>
(Replace slider with any control)
And Java controller interaction:
#FXML
Slider myslider;
In JavaFX id is used to set a CSS ID to a component. And fx:id is used for accessing that component in code (i.e. in a controller class). fx:id works like a components name.
Is it possible to use image inside bootstrap-min.css
We are using a theme (modern) and some icons are controlled by bootstrap.
I would like to change the following line to use image.
.glyphicon-home:before{content:"\e021"}
Try this:
.glyphicon-home{
display:inline-block;
background-image:url('../images/YOUR_IMAGE.png');
width:20px;
height:20px;
}
Just clear the content parameter and add your own image using background. The rest of the styles (display:inline-block) should still inherit.
.glyphicon-home:before{
content: "";
background: url(IMAGEPATH) 50% 50% no-repeat;
}
Oh - and I wouldn't put it into bootstrap.min.css - add it to a stylesheet that is called later, or your theme's style.css
Maybe a really newbie's question....
I'm starting learning JavaFX in a FMXL Application using the Scene Builder, by reading this tutorials:
http://docs.oracle.com/javase/8/javafx/get-started-tutorial/fxml_tutorial.htm
So once i applied some changes, an issue with this 2 IDs came up... I might have missed or confused something about them...
Can anyone tell me in which cases they are used one or another?
id you use to set a CSS ID to your Component, for example <Text id="welcome-text" .../> and in your stylesheet you have something like #welcome-text { font-size: 16pt; } so this will be applied to your Text.
fx:id you use if you want to work with your Components in your Controller class, where you annotate them with #FXML Text myWelcomeText.
The fx:id is the identity associated to component in fxml to build a controller, and the id is used for css.
I took a look at an FXML document generated using the JavaFX Scene Builder. You access controls from Java Controller with the fx:id. (edit) I stand corrected, the id does matter.
You can apply css from the FXML document like this:
<Slider id="css_id" fx:id="myslider" styleClass="style_name" .../>
(Replace slider with any control)
And Java controller interaction:
#FXML
Slider myslider;
In JavaFX id is used to set a CSS ID to a component. And fx:id is used for accessing that component in code (i.e. in a controller class). fx:id works like a components name.
Why can't I apply custom css styles to a single TextBox?
I'm trying to set some error styles on a single TextBox. What's wrong with the following implementation?
init:
static final String STYLES = ErrorRes.INSTANCE.css().style();
#UiField TextBox box;
box.setStylePrimaryName(STYLES);
Resource interface
interface ErrorRes extends ClientBundle {
static final ErrorRes INSTANCE = GWT.create(ErrorRes.class);
#Source("Error.css")
Style css();
interface Style extends CssResource {
#ClassName("gwt-TextBox-error")
String style();
}
}
Error.css
.gwt-TextBox-error {
border: 1px solid red !important;
}
If you whant to get gwt-TextBox-error style name on widget, you need set box.setStylePrimaryName("gwt-TextBox"); - it's by default. And when error occured use box.setStyleDependentName("error", true); HTML will be class="gwt-TextBox gwt-TextBox-error".
And to clear error style, use box.setStyleDependentName("error", false);
OR
You can use addStyleName("gwt-TextBox-error") and removeStyleName("gwt-TextBox-error") in a same way.
---UPDATE---
So, I tryed to run your case and it works well. At the first of all you need inject css from resources to page in runtime:
ErrorRes.INSTANCE.css().ensureInjected();
I use it in the begining of onModuleLoad()
Then, to add error style use: box.addStyleName(STYLES);
and box.removeStyleName(STYLES); to remove it.
You can't use pair setStylePrimaryName() and setStyleDependentName() with bundled css becouse css name will be obfuscated.