different background in borderpane javafx - css

I am using a VBox in the left position of my parent layout BorderPane. I want to use a css file to change and use an image background on the left side of the BorderPane which contains my VBox. I have the following in my ccs file but cant manage it to work.
.vbox{
-fx-background-image: url("/ui/image11.jpg");
-fx-background-repeat: no-repeat;
-fx-background-position: center center;
-fx-background-size: 500 500;
}
.root{
-fx-background-color: #ecf0f1;
-fx-background-position: center center;
-fx-background-size: 500 500;
}
.button{
-fx-text-fill: #ecf0f1;
-fx-background-color: #455d7a;
-fx-position: center;
-fx-min-width: 150px;
-fx-transition-duration: 1;
}
With this css file, rules in .root and .button do apply but not on .vbox. How can I manage the backgrounds of the different sections in BorderPane.
I import the css file with the following line of code:
scene.getStylesheets().add(this.getClass().getResource("/styles/contentStyle.css").toExternalForm());
Is this the correct way? The css file is in another package.

VBox doesn't have a .vbox class selector defined. One way to fix this is to
set a styleclass on your VBox called .vbox, like this:
myVBox.getStyleClass().add("vbox");
but you would need to do that for each VBox in your application if you wanted them all to have that background.
See this question about HBoxs: JavaFX: Styling application with CSS Selectors for more info.

Related

center align textarea in JavaFX with CSS

I know I am supposed to set -fx-text-alignment: center; in order to achieve a center-aligned textarea.
#txtFaContent
{
-fx-text-alignment: center;
}
with txtFaContent being the ID of my textarea (as well as its variable name inside the controller). But it doesn't have any effect on the text alignment of my textarea (I played with right/left/center; but no success).
Have I missed anything?
Add style class in your TextArea.text:
TextArea textArea = new TextArea();
textArea.getStyleClass().add("centered-text-area");
Add .text in your CSS:
.centered-text-area .text {
-fx-text-alignment: center;
}

Angular Material Table - CSS to get headers to left align when text wraps

With the Angular Material Table component, by default, the column headers on a table will left align, which is great:
However, if there isn't enough room for the header then the text wraps, which is fine except that the text then center aligns...
How do I make the text left align? I thought this would be straight forward, but I'm having issues. This also only appears to happen on headers with sorting, because if you remove the mat-sort-header directive from any of the header cells, things left align correctly.
I tried adding the following css class definition, but no luck:
.mat-sort-header-button {
text-align: left;
}
Here is the demo I'm playing around with.
The reason why your styles is not working is that Angular uses Emulated encapsulation be default so your styles are component scoped. That means that you can only apply class to element which is placed in component template directly. You can't style nested components.
To style elements from nested components you have to use ::ng-deep selector:
::ng-deep .mat-sort-header-button {
text-align: left;
}
Forked Stackblitz
There are other ways to solve it:
using encapsulation: ViewEncapsulation.None
using global styles
If anyone is still looking for global styling, then check this.
StackBlitz link for sort header alignment
Define below styles in style.css:
For text alignment in sort header or normal header
th.text-align-left,th.text-align-left .mat-sort-header-button {
text-align: left !important;
}
th.text-align-right,th.text-align-right .mat-sort-header-button {
text-align: right !important;
}
th.text-align-center,th.text-align-center .mat-sort-header-button {
text-align: center !important;
}
For Content Alignment in sort header
th.align-center .mat-sort-header-container {
justify-content: center;
}
th.align-right .mat-sort-header-container {
justify-content: flex-end;
}
th.align-left .mat-sort-header-container {
justify-content: flex-start;
}
And you can use these text-align-left, align-left etc classes in th

Ionic customize color of ionic refresher spinner icon

How can I customize the the styles of ionic refresher spinner icon for every page? In each page on my app the spinner should have different color depending where page the user is on. I have done something like this in my css. But I only customized the background color of the refresher to gray.
Here is the styles.css
ion-refresher * {
// background-color: white;
ion-refresher-content * {
icon * {
color: #dd2727;
}
color: red;
.refresher-refreshing {
.refresher-pulling-icon, .refresher-refreshing-icon {
text-align: center;
-webkit-transform-origin: center;
transform-origin: center;
font-size: 30px;
color: #dd2727;
-webkit-transition: 200ms;
transition: 200ms;
}
}
}
}
Here is the page.html
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
refreshingSpinner="crescent">
</ion-refresher-content>
</ion-refresher>
I tried googling for it but can't find any solutions.
Appreciate if someone could help.
Thanks in advance.
You can check refresher component on ionic documentation
https://ionicframework.com/docs/api/components/refresher/Refresher/
They have specified sass variables in the bottom to change styling as per our needs:
$refresher-icon-color
$refresher-icon-font-size
$refresher-text-color
$refresher-text-font-size
$refresher-border-color
So say you want to use $refresher-icon-color: red; in your app you can call this variable in theme/variable.scss which will override the default styles.
Css
Circle svg
.refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
stroke : red;
}
Pulling icon css
.refresher-pulling-icon, .refresher-refreshing-icon{
color: red
}
Every page in ionic has the page-name format so you can add your working styles in individual page scss file and if you want to change color of spinner icon then its an svg you can use above css in page scss file itself.
Like this:
page-spinner{
.refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
stroke : red;
}
}
In Ionic 4 I managed to change the pulling icon (default a dark arrow) using
ion-refresher ion-refresher-content .refresher-pulling .refresher-pulling-icon ion-icon {
color: #fff !important;
}

JavaFX add Image to title of TitledPane css only

I need to add an image to title. I know how to do that in java code.
But I want to do that via css only.
I tried:
.titled-pane > .title{
-fx-graphic: url("imgs/general/logo.png");
}
and
.titled-pane {
-fx-graphic: url("imgs/general/logo.png");
}
But it did not help.
Update: Resources paths.
/src/main/resources/styles.css
/src/main/resources/imgs/general/logo.png
/src/main/resources/fxml/window.fxml
Try this -fx-background-image: url("")

How to change PrimeFaces submenu default icons

What is the method of adding my own custom icons to the submenu name area in a panelMenu in PF 3.5?
This is the example given on the official documentation web page:
I have to remove the small arrows and replace them with other images. So far, I have understood that the arrows are placed by the primefaces.js (which comes in the PF JAR file). What is the method of replacing them through java? As I am generating a dynamic menu, not a static one. I would like something like this:
I have tried
MenuItem item = new MenuItem();
item.setIcon("ui-icon-print");
But this changes it for the items INSIDE the submenu. e.g. Save and Update. I am asking for the headings or group names, "Ajax Menuitems", "Non-Ajax Menuitem" etc.
Disclaimer: I've tested this with PrimeFaces 6.0, but this will most likely also work with 3.5.
The easiest way to do so (in my opinion) is using CSS. If you inspect the arrow using your browsers debugging tools you will find that the image comes from a background sprite at a specific position.
To create a more specific rule to set your icon it's best to add a style class to your submenu:
<p:submenu label="Ajax Menuitems" styleClass="myIcon">
or in Java:
DefaultSubMenu defaultSubMenu = new DefaultSubMenu("Ajax Menuitems");
defaultSubMenu.setStyleClass("myIcon");
Now you can use that class to create your CSS rules (assuming you've created a sprite):
.myIcon .ui-icon.ui-icon-triangle-1-e {
background-image: url('pathToYourSprite.svg');
background-position: 0 0; /* closed position */
}
.myIcon .ui-icon.ui-icon-triangle-1-s {
background-image: url('pathToYourSprite.svg');
background-position: 0 0; /* opened position */
}
As suggested by #Jasper, I set the styleClass attribute for the submenu and it worked. Here is the code for my xhtml:
<div class="">
<h:form>
<p:panelMenu model= "#{menuBean.getModel()}" type="tiered">
</p:panelMenu>
<p:spacer height="10"></p:spacer>
</h:form>
</div>
CSS:
.icon-1 > h3 > span{
background-image: url(../resources/images/icon_1.png);
margin: 0px 4px 0px 0px;
width: 25px;
height: 25px;
}
.icon-2 > h3 > span {
background-image: url(../resources/images/icon_2.png);
margin: 0px 4px 0px 0px;
width: 25px;
height: 25px;
}
Java:
List<Items> list = //map of items to be added to the panelMenu with a parent-child hierarchy.
String label = "SubMenu 1";
String icon = "icon-1";
Creating a new submenu and adding styleClass:
Submenu submenu = new Submenu();
submenu.setLabel(label);
//submenu.setIcon(icon);
submenu.setStyleClass(icon);
Adding the submenu to the panelMenu:
((MenuModel) container).addSubmenu(submenu);
Creating a new item to go inside the submenu:
MenuItem item = new MenuItem();
item.setValue(label);
item.setTitle(label);
item.setIcon(icon);
if (container instanceof MenuModel) {
((MenuModel) container).addMenuItem(item);
} else if (container instanceof Submenu) {
((Submenu) container).getChildren().add(item);
}
The result:
This method works much better than the first method I tried. For that, I added a custom PanelMenu renderer as explained here: Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu. It is a lot more work while requiring the same icon styling classes.
to change the icon you have two solutions
First solution
You can look to the Ui-Icon we site and choose the icon that you want to use Icons Site
Second solution
you can use your own icon using css
.mainPageIcon {
background: url(/images/image.png) no-repeat;
height: 16px;
width: 16px;
}
<p:panelMenu style="width:300px" icon="mainPageIcon ">
...
</p:panelMenu >
for Java solution
MenuItem item3 = new MenuItem();
ImageIcon imageIcon = new ImageIcon(ImageIO.read(getClass().getResourceAsStream("/Project1/rawaz/new.gif")));
item3.setIcon("imageIcon");
You can read more Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu

Resources