I have quite long Strings in one column and I want to display them as multi-line cells in my grid.
I'm using Vaadin 14 + Java and I tried to set CSS-Style Class for the specific column:
Java-Code:
#CssImport("./styles/shared-styles.css")
public class RisikoGrid extends Grid<RisikoEntity> {
public RisikoGrid() {
setSizeFull();
// add the column to the grid
addColumn(Entity::getAttribute).setHeader("MyCol")
.setFlexGrow(10).setSortable(true).setKey("mycolumn");
// set CSS style class for the specific column
this.getColumnByKey("mycolumn").setClassNameGenerator(item -> {return "grid-mycol";});
}
}
CSS (shared-styles.css)
.grid-mycol{
background: red;
white-space: normal;
word-wrap: break-word;
}
While I do see the class-name when I use the inspector in my webbrowser (chrome), the css is not applied.
What do I need to change to make it work?
Edit: this is how my styles look like - and I can't even see the background:red for instance:
You can use the built-in wrap-cell-content theme variant to allow text to wrap inside the cells.
grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);
See the last example on https://vaadin.com/components/vaadin-grid/html-examples/grid-theme-demos – the texts there are not that long, but if you make your browsers window narrow enough you’ll see some of the addresses wrap on two lines.
I looked into why my css settings didn't show up in the inspector and the solution was a minimal change from:
#CssImport("./styles/shared-styles.css")
to
#CssImport(value = "./styles/shared-styles.css", themeFor = "vaadin-grid")
I'm guessing the component scope of the grid differs from the global CSS.
It works now.
Related
I want to change the background-color of a Vaadin 14 Dialog. I did not get it how to do it. There is no method for it. The id is "overlay" and the color is #3b85e6.
How to do that? I only managed to add styles to the content, but i want to change the background.
In your Java code, your view class, add import for styles.
#CssImport(value = "./styles/my-dialog.css", themeFor = "vaadin-dialog-overlay")
And create file "frontend/styles/my-dialog.css", whos content is
:host {
background: #3b85e6;
}
Im very new to CSS since I was never working with weblanguages but for a JavaFX application I've got a css style sheet with a windows 10 UWP theme. The default style classes use the default windows grey button theme, but i also created a custom style class for colored components.
The colors are as variables in the the .root style class for the default style and are overwritten in the .colored style class for the colored style.
.root
{
-fill-color: #CCCCCC;
...
}
.colored
{
-fill-color: #DD2867;
...
}
I now want to change the colored style colors at runtime.
I know about Node#setStyle(String) in which i can modify the fill color with something like this:
root.setStyle("-fill-color: #FF00FF;");
but this has only an effect on the color in the .root style class and not the .colored style class.
Can you tell me a way to direcly modify a property of a style class at runtime or maybe an even better approach to use a default and a colored style?
Thanks in advance,
Eleom.
Define another looked-up color on the root node, and use it in your .colored class:
{
-fill-color: #CCCCCC;
-colored-fill: #DD2867 ;
...
}
.colored
{
-fill-color: -colored-fill;
...
}
Then you can change that color programmatically the same way:
root.setStyle("-colored-fill: ... ;");
I am using JavaFX 8u60. I want to give my users the chance to edit a CSS file for a pane in my program, without using an external editor.
For example, the user clicks on a Label, and a dialog to select the color is shown. After the user selects the color, the color is actually written in the CSS file, in the appropriate line...
Are there CSS parsers for JavaFX?
I can't show you any Java code because I'm not sure this can be done.
.table-view .column-header .label{
-fx-font: 18 GatwickSans;
-fx-text-fill: red; //<--- user shall be able to edit this line from my program
-fx-alignment: TOP_LEFT;
}
edit: to clarify, I want to be able to edit a FX-CSS file from Java.
You can use color picker, Try this example
Hbox layout =new HBox(10);
ColorPicker colorPicker = new ColorPicker();
colorPicker.setValue(Color.RED);//Red is the default shown at first
Label label =new Label("Your Text");
layout.getChildren().addAll(label,colorPicker);
//Then
colorPicker.setOnAction(event->{
label.setFill(colorPicker.getValue());
});
Also for css
colorPicker.setOnAction(event->{
label.setStyle("-fx-text-fill: "+colorPicker.getValue()+";");
});
I have used CSSParser:
http://sourceforge.net/projects/cssparser/
It's sufficiently generic and it works a bit like the DOM XML parser. It reads the CSS file and maps it in memory, allowing you to read the single selectors, properties and values, and edit them. Check the discussion on Sourceforge to have some examples, since it lacks documentation.
I just faced an interesting thing concerning HTML widget. The thing is...
If a word length is too long per line then HTML widget becomes wider to have it all placed in
so my question is... is it possible to make HTML widget to cut by pieces long words not to getting wider itself?
Comparing to Swing, I mean the effect something like JTextArea does when word wrapping is off (see image)
EDIT
I tried to use css word-break: break-all; here is the code:
composite code:
public MyTestUI(){//constructor
html.setStyleName("my-test");
}
public void setLongWord(String word)//method
{
html.setHTML(word);
}
css
.my-test {
color:gray;
font-family:verdana;
white-space: normal;
word-break: break-all;
}
... the css works in Chrome but doesn't in FF :( How to make the word breaking the crossbrowser one ?
GWT version 2.3
Any useful comment is much appreciated
Use CSS property word-wrap:break-word as described in following link. This will work even if the HTML widget is having static height and width.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Use CSS property word-break:normal; or try word-break:hyphenate;
Add a CSS style to your HTML widget to break long words:
http://www.w3schools.com/cssref/css3_pr_word-break.asp
EDIT:
I stay corrected: word-wrap is a better option. See more:
What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS
I all, I'm new to the ADF language and after a long search and failed tries, I have to ask how can I change a button layout - background, border, ... - using the CSS and the property "styleClass" of the ADF?
In my .jspx I have something like:
<af:commandButton action="#{backing_test.echoAction}" id="echo1" text="Save 1" styleClass="commandButton.buttonSaveTest" />
The thing is, after opening firebug, I found out that instead of a regular button, I have an image!
Thanks for you help!
You can't rely on what generated HTML you'll get for a specific component in ADF. The best way to get your own look and feel is to implement your own 'skin', which extends one of those already provided by ADF (eg, 'blafplus', or 'fusion', the new default). You then use the CSS selectors for the component you want, eg
af|inputText::content {
background-color: red;
}
Check out the following link to learn about skinning
http://download.oracle.com/docs/cd/E17904_01/web.1111/b31973/af_skin.htm#BAJFEFCJ
The hosted demo is an excellent way of finding out how to skin specific components. Eg, for your command button, check out:
http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/commandButton.jspx