CSS styles are not applied to elements added to JavaFX component tree - css

I have applied CSS style to JavaFX components and it looks like everything is working fine except one situation: when I add JavaFX components to component tree on-the-fly their CSS styles are not applied.
For example following code:
package test;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.input.MouseEvent;
import javafx.util.Math;
import javafx.scene.paint.Color;
function getRect(): Rectangle {
return Rectangle {
x: 230 * Math.random()
y: 60 * Math.random()
width: 20, height: 20
styleClass: "abc"
}
}
def stage: Stage = Stage {
scene: Scene {
width: 250, height: 80
stylesheets: "{__DIR__}main.css"
content: [
Rectangle {
x: 0, y: 0, width: 250, height: 80
fill: Color.WHITE
onMouseClicked: function (evt: MouseEvent): Void {
insert getRect() into stage.scene.content;
}
}
getRect()
]
}
}
with following stylesheet:
.abc {
fill: red;
}
in main.css file (both in test package) display red square on white background, but after clicking the main rectangle black (not red) squares are added to scene.
I noticed that:
Components added dynamically look just like style information was not applied.
If you set their style in JavaFX code then everything works fine.
After changing stylesheets property (so that it points to another valid stylesheet) the objects already added render properly.
Does anyone know the solution to this problem? I could of course put all the properties into JavaFX code or provide another stylesheet (for every existing stylesheed) that would contain the same data and change stylesheet right after adding any component, but I would like to find some elegant solution.
Thanks in advance.

It's a bug in 1.2. It is fixed in the next release.

Related

Prevent a style (accidently loaded globally) from applying to a control

I'm trying to use TextField of Fluent UI.
import React from 'react';
import { TextField } from '#fluentui/react';
class Try extends React.Component {
render() {
return (
<TextField label="With auto" multiline autoAdjustHeight/>
);
}
}
export default Try;
Then, I realize that there is no space between the label and the text area. I check the CSS and understand that it is due to a label { margin-bottom: 5px; height: 22px } defined in index.css of another component XXX. Many tags and classes are defined in XXX/index.css such as form, label, input, button. Because I have import ./index.css in the component XXX and import ../XXX/index.css in several other components, XXX/index.css is loaded globally. And this XXX/index.css disturbs label of TextField of Fluent UI inside Try.
Does anyone know what I could do to Try component such that its TextField is not disturbed by XXX/index.css?
You may do this.
create another css file and load that css globally or just change that particular css only this the following.
label:not(#dont-apply-label *) { margin-bottom: 5px; height: 22px }
Now when you call the Fluent-Ui component, give a id
<TextField id="dont-apply-label" label="With auto" multiline autoAdjustHeight/>
This might not be best solution out of the box. But worth trying.
Another way can be triggering with class name like the following but not sure gonna work.
label:not(.ms-TextField *) { margin-bottom: 5px; height: 22px }

Overriding colors in React Material UI

Does anyone know how to override colors in Material UI without using JS?
Is there a way to override colors using CSS only?
Yes. You can absolutely do that and there are multiple ways to go about it. Everything is explained in the official documentation here
The simplest way is to use the sx prop in your component but you can use only css also if you prefer to.
You can use styled to override styles. https://mui.com/system/styled/#main-content
import Box from '#mui/material/Box';
import { styled } from '#mui/system';
styled(Box)`
height: 100px;
width: 100px;
background-color: red;
`
import * as React from 'react';
import { styled } from '#mui/system';
const MyComponent = styled('div')({
color: 'darkslategray',
backgroundColor: 'aliceblue',
padding: 8,
borderRadius: 4,
});
export default function BasicUsage() {
return <MyComponent>Styled div</MyComponent>;
}

Angular 6, how to configure CSS settings to create a persisting background color on all components?

I'm trying to create a background color that will persist on all of the components in my Angular app.
When I target html background: blue in the styles.css (global style sheet) this works if I change the encapsulation on the app.component.ts to ViewEncapsulation.Native, however it covers every component in the app. Meaning the color is on top of every other component.
I just want to set a background color that that will be behind all components in the app and persist.
I had the same problem and fixed with this. I do not know if is the best approach, try to put into the body tag in index.html:
<body class=".." style="background:#E8EBEE;">
Go to your Style.css or Style.scss file and add this code:
body {
background: #EEE //Your Background Color that will be shown between all components even if the component fails to load.
}
Import Renderer2 as follow:
import { Component, OnInit, Renderer2 } from
'#angular/core';
And If you want to add a custom background when a component being use, you will have to go to your component.ts File and add this code to the constructor:
constructor(private renderer: Renderer2) {
this.renderer.setStyle(document.body, 'background',
'#FFF');
}
That code will apply a background color to the body only when this component is loaded.

Angular material: snackbar is hidden behind component with high z-index

So I'm playing around with Angular a bit and I wanted to add material snackbar to my app for when there's an error in my app.
So, I have my hompage and my navigation is an overlay with a z-index of 3000. In the navigation there's the option to log in ( see picture below ). I entered bad log in data on purpose to trigger the error handler and make the snackbar appear.
The snackbar does appear. However, it is hidden behind the navigation. How can I make it show above the navigation? I tried adding a z-index of 10000 to the scss of the component that handles the snackbar with the following code:
* {
z-index: 10000;
}
and
::root {
z-index: 10000;
}
But none worked. Does anyone know how to do this?
App.component.ts: user-navigation is where I handle the log in. Notifications contains the logic for the snackbar
<navigation></navigation>
<user-navigation>
</user-navigation>
<router-outlet></router-outlet>
<notifications></notifications>
Notifications.component.ts , this works, it opens the snackbar, but it is hidden behind the user navigation
import { Component, OnInit } from '#angular/core';
import {MatSnackBar} from '#angular/material';
import {NotificationService} from '../services/notification.service';
#Component({
selector: 'notifications',
templateUrl: './notifications.component.html',
styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit {
constructor(public snackBar: MatSnackBar, private notificationService: NotificationService) { }
ngOnInit() {
this.notificationService.notification$
.subscribe((message) => {
console.log('received the notification', message);
this.openSnackBar(message);
});
}
openSnackBar(message: string, action?: string) {
setTimeout(() => {
this.snackBar.open(message, action, {
duration: 20000
});
}, 0);
}
}
This is the login page. The home page is behind this and not visible because of the high z-index I gave to the navigation
This is the homepage when I close the navigation. The snackbar is visible, but I want to be able to also see it with the navigation open
(Angular 8)
Putting this on style.css worked fine for me:
.cdk-overlay-container {
position: fixed;
z-index: 10000;
}
you can try with override this css class
style.css/style.scss
.cdk-overlay-pane{
z-index: 10000 !important;
}
(Angular 9) I add the following css code to fix it.
styles.scss
.cdk-overlay-container {
z-index: 99999999999999;
}
I had the same issue. I decided to reduce the z-index of the footer element instead of increase the snack one.
Regards
M
can't you just put the <notifications> element on top?
<notifications></notifications>
<navigation></navigation>
<user-navigation></user-navigation>
<router-outlet></router-outlet>
Try to put this in your base/root css file, if you don't have one, try adding tags in your index.html file and add this css over there.
:host /deep/ .cdk-overlay-pane{
z-index: 1000;
}
I have a problem because while using MatSnackBar and MatDialog since MatSnackBar was always overlaid by dialog. With this solution, I got MatSnackBar with a higher z-index: https://github.com/angular/components/issues/7471#issuecomment-340856500
.cdk-overlay-container { z-index: 100000; }
For Any Angular Version | you can use this,
btw you can increase the size until it gets appeared on top of every elements(I mean your components).

How to set background image for Angular component?

In my angular app I would like to set a background image for a specific view.
To this end, I added the following to the css-file of a component:
body {
background-image: url("../../../assets/images/backgroundImage.jpg");
}
However, the background doesn't change.
This the the file path of the file containing the css-code shown above:
angular-app/src/app/users/profile/profile.component.css
... and this is the file path of the background-image:
angular-app/src/assets/images/backgroundImage.jpg
I also tried
body {
background-image: url("assets/images/backgroundImage.jpg");
}
... but this resulted in a warning during compilation and didn't work either.
What am I doing wrong?
I gave the root element class "root" and then put the following into the css-file:
.root {
background-image: url("../../../assets/images/backgroundImage.jpg");
}
... now the background changes but not for the whole vertical length of the screen (the lower part remains white):
According to Angular, The styles specified in #Component metadata apply only within the template of that component.
you can use a hack like this
In your styless.css file add this
.selector {
background-image: url("../../../assets/images/backgroundImage.jpg");
}
now in your component you can do this
ngOnInit() {
document.body.className = "selector";
}
ngOnDestroy(){
document.body.className="";
}
But this is highly not recommended, i dont know what your code looks like, but there must be another way.
Scale your component to fit whole view-port
set the background on your component
I will work on a plunker and link to this file as an edit when done
I will add another answer for this because its totaly different from my previous answer
in your component import ViewEncapsulation from angular/core
import { ..., ViewEncapsulation } from '#angular/core';
In your #component metatag add encapsulation: ViewEncapsulation.None,
#Component({
...
encapsulation: ViewEncapsulation.None,
...
})
This has a side effect though, all styles in your component will be available to all other components once it loads.
You can check more about it on the Angular page
You probably need to either create a service or use ngrx to communicate between the child component and app.component to switch the style of the app.component.html using ngClass.

Resources