For some reason, I can't seem to change the font or font size in my GWT TextAreas. The default font for text areas doesn't even match with the rest of the default fonts, it looks like notepad font for some reason. I've tried adding and setting style names, but the font will not change, only the color and other parts of the TextArea will change. I think I may have broken something earlier when I added, then removed SmartGWT. Does anyone have any ideas what could be causing this?
You have to check your theme inherit line in your Module.gwt.xml file to verify you have one gwt theme included (normally when using smartgwt we put in comment this one ) and no smartclient theme inherited.
Have a look on your TextAreas with firebug to see which css class is applied and check in your css file to see if you have any entry for this class.
I had the same problem and so used the Chrome inspector to find out why my styles were not being applied. It seems that they were being ignored because of settings in clean.css. So then I did:
.gwt-TextArea {
font-family : monospace !important;
font-size : 10pt !important;
}
And that worked.
Related
I am using the controlsfx library, particularly it's Notifications component, however it's default CSS styling doesn't fit my applications style at all, so I'm trying to change it.
I tried using the solution provided in this post
Is there a way to change the built-in controlfx notification popup color?
So:
String css = this.getClass().getResource("notificationpopup.css").toExternalForm();
primaryStage.getScene().getStylesheets().add(css);
Notifications.create().owner(primaryStage).(...).show();
The CSS file is being successfully loaded, there are also no errors with adding it to the styleSheets, the style of the notification remains, however, the same. I have tried loading both a whole file identical, except my changes, to the one used in the library and short css file only with what I wanted to change
My css file changes, for reference:
.notification-pane .notification-bar > .pane {
-fx-background-color: linear-gradient(to top, #3e5151, #decba4);
-fx-padding: 0 7 0 7;
}
(for now I'm just trying to change the background to a gradient of my choice)
I have also, without success tried to implement advice from questions related to other controlsfx elements, that is to add the url to styleSheeT AFTER invoking show.
(I have also tried, just to check things out, brute changing the css inside the library jar, but somehow that also failed to work, as in the css remained the same, without any errors, even though I have modified the jar and added it again).
Since the explanation provided was very scarce, I am at a loss, as to what is wrong here.
Also in my solution I have to avoid invoking .owner() and assigning the notification to a particular stage, since then it shows up inside that stage, not on the screen outside it. Maybe that can be fixed by adding the stylesheet to some other element, not primaryStage? But for now I can't achieve any css change even when confining the notification to a stage
Kinda late to answer this. But if someone having this issue, you can fix it using those two methods.
Method 01
The issue might happen because you are using multiple stylesheets for your scene. Add your notificationpopup.css css to the begining of the arraylist. I dont have hard proofs how that fix the issue. But I think that happens because of the ordering of the stylesheets. (The overriding stylesheet should be placed after the original stylesheet inside the stylesheets arraylist. There cannot be other stylesheet(s) in between them.)
String css = this.getClass().getResource("notificationpopup.css").toExternalForm();
primaryStage.getScene().getStylesheets().add(0, css);
Method 02
Put !important to css class attributes. For ex:
.notification-bar > .pane {
-fx-background-color: red !important;
-fx-padding: 10 10 10 10 !important;
}
Two possible solutions to change the css styling for a component
In your controller class, invoke the getStyle() method as such
node.getStyle("-fx-background-color: linear-gradient(to top, #3e5151, #decba4);-fx-padding: 0 7 0 7;");
with the same code you would have in your css file on that node to style it directly and override the css values.
or
Give the node a unique CSS ID in your code or fxml file by saying
node.setId("myID");
and then in your css file writing whatever you need for that tag like
#myID {
-fx-background-color: red;
}
I googled for this, but couldn't find anything. I know that I can style a Buttons text, background colour etc, but I would like to change the text itself.
This is what I've tried (of course the actual end result is more complex, but this will do):
Button#playButton {
-fx-background-color: #ddd;
-fx-text: "Play";
}
the background colour is correctly applied, but the text does not change.
Edit: The way to go seems to be a custom property, if someone has knowledge within that field I would love a concise explanation and implementation, that could save me hours of trial and error with the few sources I found!
No you cannot set the text of your button using css. But hey! In the other hand, you can still display an icon in your button using css!
You only need to add this to your css :
-fx-graphic : url("relative path to your icon");
In case your icon is repeated in the button, then add this as well :
-fx-background-repeat : no-repeat;
First of all, is it even possible to modify the ChoiceBox checkmark shape? Completely altering the CheckBox mark was easy enough using the CSS class (.check-box:selected .mark). However, all that I've found online for the ChoiceBox's ContextMenu's mark is that you can modify its color using -fx-mark-color within the .context-menu CSS class. I've tried several classnames to change the shape to a custom SVG to no avail.
.context-menu .menu-item:selected .mark {
-fx-shape: "M1,1 h4 v4 h-4 v-4 Z";
}
In the following picture I've completely reskinned my JavaFX application to match Mac's native Cocoa GUI, but the menu checkmark is the only flaw that appears to be impossible to fix.
Search the modena.css stylesheet for -fx-shape. For Java 8, You will find:
.check-menu-item:checked > .left-container > .check
This is the CSS selector for checkmarks inside menu items (it also covers checks for selected items in a ChoiceBox). Define the same CSS selection path in a custom CSS stylesheet. Inside that selector, place a -fx-shape rule that defines a custom svg path for the shape you wish to use for checks.
SmartClient Version: v9.0p_2014-02-13/EVAL Deployment
Firefox 26.0
When exporting a form to PDF, the printTextBoxStyle for a SelectItem is ignored.
I have a form containing a TextItem, a SelectItem, and a TextAreaItem.
For each FormItem, I call
formItem.setPrintTextBoxStyle("printTextBoxStyle")
This "printTextBoxStyle" hides the border around the text box.
/* PrintStyle.css */
.printTextBoxStyle {
border-style: none;
}
PrintStyle.css is an extra stylesheet defined in my server.properties.
In the exported PDF, the style is applied to the TextItem and TextAreaItem, but the SelectItem always has a border still.
I've tried changing my .printTextBoxStyle to something more obvious as a test, like color:green. When I do that, the text color inside the text boxes for the TextItem and TextAreaItem changes to green. The style for the SelectItem text box always remains the same -- black text with a border around it. It always looks the same for all the CSS properties I've tried.
This leads me to believe that there is something different about SelectItems when it comes to print style. How do I remove the border around a text box for a SelectItem when exporting to PDF?
This is a bug in SmartGWT and has been resolved in the latest nightly build as of 2014-03-03.
http://forums.smartclient.com/showthread.php?p=116928
Did you try with adding the argument !important to the css property border-style. The goal is to impose your style...
I am displaying HTML content inside a Swing JEditorPane. To change the default look of the HTML i am using a CSS style sheet. This works great. My problem is only that the JEditorPane does not support the full CSS specification. Is there a list of CSS features the JEditorPane supports?
Looking at the CSS.java sourcecode freom the OpenJava JDK, I found this:
Defines a set of CSS attributes as a typesafe enumeration. The HTML View implementations use CSS attributes to determine how they will render. This also defines methods to map between CSS/HTML/StyleConstants. Any shorthand properties, such as font, are mapped to the intrinsic properties.
The following describes the CSS properties that are suppored by the rendering engine:
font-family
font-style
font-size (supports relative units)
font-weight
font
color
background-color (with the exception of transparent)
background-image
background-repeat
background-position
background
background-repeat
text-decoration (with the exception of blink and overline)
vertical-align (only sup and super)
text-align (justify is treated as center)
margin-top
margin-right
margin-bottom
margin-left
margin
padding-top
padding-right
padding-bottom
padding-left
border-style (only supports inset, outset and none)
list-style-type
list-style-position
The following are modeled, but currently not rendered.
font-variant
background-attachment (background always treated as scroll)
word-spacing
letter-spacing
text-indent
text-transform
line-height
border-top-width (this is used to indicate if a border should be used)
border-right-width
border-bottom-width
border-left-width
border-width
border-top
border-right
border-bottom
border-left
border
width
height
float
clear
display
white-space
list-style
Java has had a relatively poor record with regard to HTML/CSS support. The comment in the docs highlighted by trashgod have been promising improvements for years. Around about the time when JavaFX was being released there was talk of an official JWebPane which would allow Java developers access to the webkit engine, as used in Safari and Chrome. However, it never materialised.
The only advice I can offer is to look at alternative HTML/CSS renders for Java. One I'm often recommending is the xhtmlrenderer project. Development has slowed down as it generally maintains the existing version with the occasional bugfix. It targets CSS2.1, which is often more than adequate; although perhaps it'll move into CSS when the standard is actually finalised.
JEditorPane is very limited. You are better off integrating a native web browser if you want proper HTML display.
Check projects like DJ Native Swing project: http://djproject.sourceforge.net/ns