I want to apply CSS for Vaadin 23 label but its not working properly. Please suggest me appropriate process.
Label label1 = new Label("Temp");
label1.addClassName("bold-label");
vaadin-label.css:
:host(.bold-label) [part~="label"] {
font-weight: bold;
color:red;
}
Label is standard HTML element. See Mozilla Developer documentation. Not a specific Vaadin crafted component with shadow DOM (where you would need the vaadin-*.css in the components folder).
Instead you can put your css inside styles.css and use a simple label.bold-label selector.
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.)
Some coworkers and I are writing help documentation in HTML to be used with a JavaFX WebView panel. We want it to look consistent with the rest of the UI. Normally I would specify the default font in a CSS file, but the rest of the JavaFX application appears to use the default system UI font.
Is there any way to set this programmatically? I can pick Segoe UI by name in .css, but we want it to look correct regardless of platform.
Use
Font.getDefault().getName()
to get the defaults font name and just add it to the HTML file / String which is about to be added into the WebView.
example:
cssString = cssString + "html { font-family: '" + Font.getDefault().getName() + "';}";
Ofcause you should do it cleaner than this.
If I understood you completely you want a default font for the whole javafx part of your application. I suggest you do this:
Download a font of your own as .ttf and add it to the resources in your application.
Load the font with the static function Font.loadFont:
Font.loadFont(this.class.getClassLoader().getResource("fonts/YOURFONT.ttf").toExternalForm(), 10);
Now set the font to the root of the application. I suggest doing that with css as it is suggested here -> another stackoverflow answer: In your application.css add:
.root{ -fx-font-family: "YOURFONT"; }
After that you need to load the application.css file and set it on your scene:
scene.getStylesheets().add(this.class.getClassLoader().getResource("css/application.css").toExternalForm());
I believe that it is better if you are not dependent of the system on which your app is running, so pack the font in your application.
For the html you can do completely the same thing with normal css by providing a #font-face.
I have a GWT application with some SimplePanel.
How can I make its border dashed?
I tried myPanel.addStyleName(Style.BorderStyle.DOTTED.getCssName());, but it didn't work.
This should work using Element#getStyle() method to update the element's Style object.
SimplePanel myPanel=new SimplePanel();
myPanel.getElement().getStyle().setBorderStyle(BorderStyle.DOTTED);
but I suggest you to keep the styling in the CSS file instead of directly applying it in Java file that is more difficult to manage and change in future mostly in case of themes.
CSS:
.dashedBorder{
border: 1px dotted black;
}
JAVA:
SimplePanel myPanel=new SimplePanel();
myPanel.setStyleName("dashedBorder");
I m having trouble using JEditorPane.
I want to do left align and right align text on the same line.
Here is my code:
INFO_AREA = new JEditorPane();
INFO_AREA.setBorder(BorderFactory.createCompoundBorder(BORDER,
BorderFactory.createEmptyBorder(10, 10, 10, 10)));
HTMLEditorKit kit = new HTMLEditorKit();
INFO_AREA.setEditorKit(kit);
StyleSheet styleSheet = kit.getStyleSheet();
styleSheet.addRule(".alignleft{color : rgb(0,128,25); font-weight: bold; float: left;}");
styleSheet.addRule(".alignright{color : rgb(0,128,25); font-weight: bold; float: right;}");
INFO_AREA.setText("<html>" +
"<center><b><font size=6>Important Information</font></b></center>"
"<div id=textbox><p class='alignleft'>left</p><p class='alignright'>right</p></div>" +
"</html>");
INFO_AREA.setLocation(305, 10);
INFO_AREA.setSize(275, 200);
INFO_AREA.setEditable(false);
PANE.add(INFO_AREA);
It doesn't work it seems like JEditorPane does not support float.
So maybe anyone has any ideas how I can achieve left align and right align text on the same line?
Swing's HTML renderer is old. It supports HTML 3.2 and CSS 1.0, and it does not even support all capabilities of those specifications.
Looking at the documentation of the CSS class, we see that it lists all of the CSS properties it supports. There is a list of what is supported, following by a list prefaced with "The following are modeled, but currently are not rendered." In that list is the float property.
So, Swing HTML rendering does not currently support the float property. At all.
There is a long-standing open bug, Java Bug ID 4296022, for this issue.
I have a label with style class "test" in my javafx application.
I wanted to add white border around this label, so in the css file I tried:
-fx-border-width: 2;
-fx-border-color: white;
but that didnt worked so then i tried to add:
-fx-border-style: solid;
but that didnt worked either, following javafx css reference I didn't find anything useful.
what am I doing wrong?
Can you try:
System.out.println(label);
it should print something like
Label#1858c80c[styleClass=label]
Is your css class printing too after styleClass=label ... ?
Or can you remove css class of the label and try setting the label style in code directly by:
label.setStyle("-fx-border-color: white;");
if you can see the changes then maybe you are unintentionally overriding css class definiton in css file. Check it.