I need to have rounded corners on TextArea, but it looks a bit weird. Seems, some inner layer should also have rounded corners with the same radius, but which one?
I use this CSS:
.text-area {
-fx-background-color: #dbb1b1, #fff0f0;
-fx-background-radius: 15;
-fx-border-radius: 15;
-fx-border-color: red;
}
And it looks like this one:
TextArea corners
Seems I was needed to post this question in order to find solution by myself :D
.text-area .scroll-pane {
-fx-background-color: transparent;
}
.text-area .scroll-pane .viewport{
-fx-background-color: transparent;
}
.text-area .scroll-pane .content{
-fx-background-color: transparent;
}
You can follow this.Hope this should help.
.text-area {
-fx-border-radius: 10 10 0 0;
-fx-background-radius: 10 10 0 0;
/* top-left, top-right, bottom-right, and bottom-left corners, in that
order. */
}
Related
Is it possible to add space between the button and its border? I want the black color to fill the button but not completely it should leave out a little spacing between the border.
The button layout is width:200, height:40
The CSS used:
.button:focused, .button:hover{
-fx-text-fill: aquamarine;
-fx-border-color: -fx-text-fill;
-fx-border-radius: 50px;
-fx-background-radius: 50px;
-fx-scale-x: 1.1;
-fx-scale-y: 1.1;
-fx-background-color: #34495E;
}
.button:hover{
-fx-cursor: hand;
-fx-background-color: black;
}
.button{
-fx-font-size: 20px;
-fx-background-radius: 5 5 5 5;
-fx-text-fill: #f0f0f0;
-fx-border-color: -fx-text-fill;
-fx-border-radius: 5 5 5 5;
-fx-border-width: 2px;
-fx-background-color: #34495e;
}
You can specify multiple backgrounds in JavaFX CSS, which are rendered one on top of the other in the order they are specified. Each background can have a corresponding insets, enabling you to see a portion of the backgrounds which come before it.
So, to leave a gap between the border and the background, you can specify a transparent background before the "main" background, with a positive insets for the latter:
.button {
-fx-background-color: transparent, black ;
-fx-background-insets: 0, 5 ;
}
I'm trying to allow 5 pixels of space between rows on a JavaFX TreeTableView. I figured that changing the margin, padding, or border width on one of the CSS elements would fix it, but either nothing happens or the text in the table cell is moved around.
I see that there might be solutions for TreeViews and TableViews, like the StackOverflow link below, but they don't appear to apply to TreeTableViews.
How to set space between TableRows in JavaFX TableView?
My Current CSS:
.tree-table-view {
-fx-table-cell-border-color: transparent;
-fx-background-color: black;
}
/* TreeTableView */
.tree-table-view .column-header,
.tree-table-view .column-header-background .filler {
-fx-background-color: black;
-fx-border-width: 100;
}
.tree-table-cell{
-fx-text-fill: white;
-fx-wrap-text: true;
}
.tree-table-row-cell .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-min-width: 0;
-fx-pref-width: 0;
-fx-max-width: 0;
-fx-min-height: 0;
-fx-pref-height: 0;
-fx-max-height: 0;
}
.tree-table-row-cell:expanded .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-max-width: 0;
-fx-max-height: 0;
}
.tree-table-row-cell{
-fx-background-color: black;
-fx-font-size: 12px;
-fx-indent: 0;
-fx-cell-size: 50px;
}
.group-tree-table-row-cell{
-fx-background-color: darkgray;
}
.entry-tree-table-row-cell{
-fx-background-color: darkslategray;
}
.tree-table-row-cell:selected{
-fx-background-color: darkblue;
-fx-table-cell-border-color: transparent;
}
You will want to apply your style to the tree-table-cell style class (Documentation can be found here: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#treetablecell)
Applying a border width of 5 at the bottom of each cell in a column can give you the desired effect without shifting the text. This can be done by adding the following to your style sheet.
.tree-table-cell {
-fx-border-width: 0 0 5 0;
}
This can also be done by setting a custom cell factory for columns of the TreeTableView and providing the cells with the desired settings. See TreeTableColumn#setCellFactory(Callback<TreeTableColumn<S,T>,TreeTableCell<S,T>> valuehttps://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/TreeTableColumn.html#setCellFactory-javafx.util.Callback-).
.popup-view {
-fx-background-color: red; // nothing happens here
}
.popup-view .scroll-pane {
-fx-background-color: green; // nothing happens here
}
.popup-view .viewport {
-fx-background-color: violet; // color is shown
-fx-border-color: violet;
-fx-background-radius: 7; // no affect
-fx-border-radius: 7;
}
if i remove .viewport it just shows a white background without radius.
i want a popup-view with a certain color and radius for
that background - as violet for example. thanks for any help!
If you check your PopupView control with ScenicView, you'll see that its ScrollPane has as style class root-node.
So your css should be something like this:
.popup-view > .root-node {
-fx-background-color: green;
}
.popup-view > .root-node > .viewport {
-fx-background-color: violet;
-fx-border-color: violet;
-fx-background-radius: 7;
-fx-border-radius: 7;
}
I am using BreadcrumbBar from ControlsFX which works fine. The only problem i have is styling it to look like the image below. When using scenic view i saw that this component only has three classes .bread-crumb-bar, .button, .first. I tried adding border image like so, but did not appear.
/*
* ControlFX bread crumb
*
*/
.bread-crumb-bar {
}
.bread-crumb-bar .button {
-fx-padding: 0 3 0 3;
-fx-border-color: null;
-fx-border-insets: 0;
-fx-border-image-source: url("../images/icon/crumb-focused.png");
-fx-border-image-slice: 1 10 1 10 fill;
-fx-border-image-width: 1 10 1 10;
-fx-border-image-repeat: stretch;
}
.bread-crumb-bar .button.first {
}
How can i style controlsfx breadcrumb to look like breadcrumb in the image
That's how i have solved it very similar. For the slash you need the image.
You need to fiddle around with padding and set your font-family appropriately. Didnt find a selector for the last/selected crumb.
bread-crumb-bar {
-fx-background-color: transparent;
}
.bread-crumb-bar .button {
-fx-padding: 8 12 8 20;
-fx-border-color: null;
-fx-border-insets: 0;
-fx-content-display: left;
-fx-background-position: left center;
-fx-background-repeat: no-repeat;
-fx-background-image: url("../img/slash.png");
-fx-background-color: transparent;
-fx-border-color: transparent;
-fx-shape: null;
}
.bread-crumb-bar .first {
-fx-background-color: transparent ;
-fx-border-color: transparent;
-fx-font-size: 1.11em;
-fx-text-fill: #000;
-fx-background-image: null;
-fx-shape: null;
-fx-padding: 8 12 8 0;
}
.crumb {
-fx-text-fill: #000;
}
.crumb:hover,
.crumb:selected,
.crumb:focused
{
-fx-background-color: rgba(0,0,0,0.1);
-fx-border-color: null;
-fx-font-size: 1.11em;
-fx-text-fill: rgba(0,0,0,0.5);
}
I want to have a textfield with three different borders for three cases:
a white border when not hovered or focused
a grey border when hovering
a blue border when focused and typing
I started like this:
#custom-text-field {
-fx-border-width: 2;
-fx-border-color: white;
}
#custom-text-field:hover{
-fx-border-width: 2;
-fx-border-color: #909090;
}
#custom-text-field:focused{
-fx-border-width: 2;
-fx-border-color: #0093EF;
}
The problem is that the border for focusing never shows up. How do it set it correctly?
I use it like this
.custom-text-field {
-fx-background-color:
#FFFFFF,
#FFFFFF;
-fx-background-insets: 0, 2;
-fx-background-radius: 0, 0;
}
.custom-text-field:focused {
-fx-background-color:
#0093EF,
#FFFFFF;
}
.custom-text-field:hover {
-fx-background-color:
#909090,
#FFFFFF;
}
.custom-text-field:focused:hover {
-fx-background-color:
#0093EF,
#FFFFFF;
}