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");
Related
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.
According to https://help.eclipse.org/luna/index.jsp?topic=%2Forg.eclipse.rap.doc%2Fguide%2Freference%2Ftheming%2FCCombo.html the CCombo widget from SWT is themable, and the icon can be set.
I have the following CSS:
CCombo{
background-color: rgb(00,255,00);
}
CCombo Text {
background-color: rgb(00,255,00);
}
CCombo Button{
background-color: rgb(00,255,00);
background-image: url(ABSOLUTE PATH TO ICON);
}
CCombo Button-Icon{
background-color: rgb(00,255,00);
background-image: url(ABSOLUTE PATH TO ICON);
}
List[style~='SWT.DROP_DOWN']{
background-color: rgb(00,255,00);
}
And the background color is working fine. However I can't seem to get the icons working. I am using Linux to develop, however the application is deployed to windows7/10 so a solution for this platform would be sufficient for me.
I don't think this is possible.
The down arrow in CCombo is created using the SWT.ARROW | SWT.DOWN style on Button.
This setImage method of Button specifically ignores any setImage call when the style is SWT.ARROW so the CSS styling will not work.
I am looking at the macOS SWT code, there may be differences on other platforms.
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 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.
How to change single element of the widget style in GWT. I would like to create new version of TextBox style, so that only the border color changed to red, for example.How to get to the style responsible for the TextBox?
I tried to create new style
.gwt-TextBox.invalid {
border-color: red;
}
but it does not work.
Make sure you add class invalid to your TextBox:
textBox.addStyleName("invalid");
Use CssResource to associate your CSS file with GWT: http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles