Using JavaFX 15
There's a line of shadow below the border of the JavaFX FXML button.
is it possible to make it transparent using CSS? As I do not know which attribute it belongs to.
Picture of the button attached below
.btn{
-fx-background-color: black;
-fx-background-radius: 30px;
-fx-border-color: white;
-fx-border-radius: 30px;
-fx-border-width: 3px;
}
colored with black background and white borderline for visibility
It is possible that what you are seeing is the background spilling out past the border. Since you have customized the border thickness in the CSS, you may also need to adjust background insets.
See the CSS docs for Region https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#region
I have never seen this behaviour, but a nice reference for attributes available to the basic JavaFX-classes can be found here: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
This could maybe be due to not overwriting all the standard JavaFX button style attributes.
Related
I'm working with a Popover, which is used as a tooltip-like help-display for a Textfield.
It contains a Label and a TextArea as content and is created, when the user enters the text field. (Via FocusPropery.addListener )
I apply the style using:
popOver.getRoot().getStylesheets().add(...)
(as found in the documentation documentation )
This works for the TextArea, but only partialy for the label.
My Style looks like this:
*{
-tb-dark-grey: rgb(32,38,44);
}
.root {
-fx-base: -tb-dark-grey;
-fx-background: -tb-dark-grey;
-fx-control-inner-background: -tb-dark-grey;
}
This works very good in my main window. Including all Labels and TextAreas. Everything gets a dark-blue background with white text.
For the Label in the Popover however it changes only the text color to white but the background stays at the usual light grey.
I tried using the TextArea as a workaround. This works for the style. But it always steals the focus from the text field. This makes it impossible to type something. Disabling the TextArea works,but that changes the style of the TextArea.
I already tried appling the style as found in this other question.
I also tried getting the focus back with, which also did not work.
popup.Show(this.inputField)
this.inputField.requestFocus(); // also tried this with Platform.runLater
Your problem should be that Label doesn't use any of the colors you have overwritten in your .root style class. According to JavaFX CSS reference guide you can style the background of a Label by using fx-background-color.
Adding the following line to your stylesheet should do the trick:
.label {
-fx-background-color: -tb-dark-grey;
}
You can also apply the style individually for each label by creating a custom style class if you want to style labels differently:
CSS:
.custom-label {
-fx-background-color: -tb-dark-grey;
}
And then applying it to a specific label:
Label label = new Label("I am a label");
label.getStyleClass().add("custom-label");
Edit: You should probably be aware that your TextArea will not display the exact color you've defined in your stylesheet. If you check the Modena stylesheet, which is the default theme and style for JavaFX (how to find it is described here). You will find the following css for the TextArea content:
.text-area .content {
/*the is 1px less top and bottom than TextInput because of scrollpane border */
-fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
-fx-cursor: text;
-fx-background-color:
linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
-fx-background-radius: 2;
}
As you can see. The background color of the TextArea content is not exactly the -fx-control-inner-background that you have defined in your stylesheet, but a linear gradient that goes from a color derived from -fx-control-inner-background to the color you want. This might not even be noticeable for you, but could be good to know.
Setting the color of the TextArea background so that is it precisely your color could be done like this:
.text-area .content {
-fx-background-color: tb-dark-grey;
}
The following style looks as expected on SceneBuilder. (The only visible border is the bottom one and it is dotted.)
But it looks different on runtime. (All borders are visible and solid.)
.floatingPanel-title{
-fx-text-alignment: center;
-fx-text-fill: CORNFLOWERBLUE;
-fx-font-weight: bold;
-fx-font-size: 15px;
-fx-background-color: #545050;
-fx-border-style: none none dotted none;
-fx-border-color: white;
}
I tried some by swaping the lines or commenting-out some parts but the problem is still an issue.
What do you suggest as a solution?
Note:
1) I applied this style to a label and also a panel. The problem is valid for both.
2) I have already tried clean-compile. Problem still exists.
It seems to be a bug, sorry. On my testing with JavaFX 8u40:
1) Even though the official JavaFX CSS Reference Guide says on -fx-border-style as
A series of border style values, separated by commas. Each item in the
series applies to the corresponding item in the series of border
colors.
The comma separated example behaves weird and wrongly than not comma separated one. i.e. these
-fx-border-style: dotted dashed dashed dashed;
-fx-border-color: red red red red;
-fx-border-width: 2;
and
-fx-border-style: dotted , dashed , dashed , dashed;
-fx-border-color: red red red red;
-fx-border-width: 2;
renders differently. Not using commas seems more accurate despite the doc.
2) The border style option none is not working in JavaFX 8 but in JavaFX 2. Instead of this you may choose to use hidden.
-fx-border-style: hidden hidden dotted hidden;
3) The different rendering of SceneBuilder and at runtime may be caused by usage of different versions of JavaFX. You can inspect the used version by
System.out.println(com.sun.javafx.runtime.VersionInfo.getRuntimeVersion());
Finally, after observation of yourself, you are welcome to file a jira issue or vote for existing one.
We are writing a site for a user cannot use a mouse. He wants to press Tab on the keyboard to move between images and press return to go to the href link associated with that image. We got that much worked out OK.
But how can we highlight the image in some way so he can easily see which image he has tabbed to?
We don't have an jQuery skills so we are trying to keep our coding to html and css
We have the code:
I thought I could introduce a class to change something about the image.
For example, we introduced a class
.classA {border:double;}
and using it
But that didn't work. We tried lots of effects but none of them worked.
Any suggestions as to how we can highlight the image he has tabbed to?
how we can highlight the image he has tabbed to
When tabbing between anchors on a page, that element gains "focus" - using the :focus pseudo selector, we can therefore restyle images that are inside an anchor that has been tabbed to with a:focus img - for example:
a:focus img {
border: 1px solid #F00;
}
Though adding a border could break layouts - you could instead do something like:
box-shadow: 0 0 10px #F00;
To give it a red glow - making it obvious, without affecting the layout of the elements.
Remember that by default, the browser puts on an outline.
Try:
img:focus {
outline:none;
border:2px solid #ABCDEF;
}
I am working on a GUI and I've run into a problem. If I set a button, label, or other widget to have a background color, the tooltip for that widget also takes the same background color. I tried editing the style sheet for the tooltip specifically and setting a different background color but it doesn't work. I also tried editing the palette for the widget but changing the color scheme for the tooltip background or text doesn't work either. Is there another way I can do this? I'd like to have consistency between all my tooltips.
Thanks!
You can do something like this to style a QToolTip in general.
QToolTip { color: #fff; background-color: #000; border: none; }
When you need to style QToolTips specifically, based on their parent widget you can use following syntax:
ParentWidgetName QToolTip { color: #333; background-color: #1c1c1c; border: none; }
Reading this will help you further.
What is the difference to use {text-decoration: underline} and {border-bottom: ...}?
which is easy to style and cross browser compatible?
when we should use border-bottom over text-decoration: underline?
Would it be good to use border-bottom always in place of text-decoration: underline?
border-bottom puts a line at the bottom of the element box. text-decoration:underline renders the text underlined. The exact difference depends on the HTML and text layout engines in use, but in general if you want text underlined, then underline it.
Sorry to say this, but some answers here are misleading. Splitting a line of text does not place the border at the bottom of the entire block, because of the nature of inline blocks. Borders under links are actually more consistent across browsers than text-decoration: underline.
See: Text-Decoration vs. Border-Bottom
As Ignacio said, border-bottom will put the line at the bottom of the containing box, whereas text-decoration:underline will actually underline the text. This becomes an important distinction for multi-line strings.
I am a single line and will look similar for both methods
---------------------------------------------------------
would probably render the same for both styles, but you'll get the following for multi-line strings.
I am a string that has been
split and added a border-bottom
-------------------------------
I am a string that has been
---------------------------
split and underlined
--------------------
Apologies for using code formatting rather than properly rending these examples, but you can see the point I'm trying to make.
bottom-border lets you control the distance between the text and the underline, so its more versatile. And (as mentioned above) it allows a different color for the underline (although I don't see a reason why you'll want to do that).
text-decoration is more 'correct' because it is the 'real' CSS property meant for underlining text.
if you set text-decoration: underline for all links then you will have to set text-decoration: none for special links which you don't need an underline. but if you use border-bottom instead, you'll save one line of CSS code (provide you set text-decoration: none in your reset CSS.
so all in all, i'll vote for border-bottom if you have a complex layout with different styles for each link but text-decoration for a simple website coded 'by the book'.
While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:
Spacing between text and "underline"
"Underline" style (dotted, dashed, solid, gradient, image)
Thickness
CSS transitions/animations
Separation of color between text and "underline"
In many cases, most of these abilities will not be needed - but it is good to have them available! I've switched to using border-bottom primarily for the ability to put a few pixels of padding between the text and the underline; the next most common use I've found is divorcing the underline color from the text color.
With CSS variables now shipping in every major browser, a "reset" stylesheet might look something like this:
:root {
--link-color: blue;
--hover-color: purple;
--underline-color: var(--link-color);
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--underline-color);
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
This way, links will display as expected on a "default" basis, yet still allow for customization as needed.
setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.
however, i presume that you want to use this technique on links by doing the following:
/* my super eye catching dual colour link */
a {
color:black;
border-bottom:1px solid red;
}
which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.
if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.
using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.
if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.
Try this border with 1px image
a:hover {
background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
background-color: transparent;
background-image: url("img/bg-link-hover.png");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 92%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}