When embedding JavaFX in javascript, is there a way to base the height and width on the size of the JavaFX stage? So if I were to update the dimensions of my stage, I wouldn't have to edit the javascript as well.
Conversely, is there a way to bind the dimensions of my stage to the dimensions of the user's browser?
In the JavaScript options is one named show_html. When setted to true, the script will show you the HTML. Once you have it, you can apply CSS styles to it and use the HTML instead of the JS.
The solution I came to was to set the applet up like so:
javafx(
{
archive: "myapp.jar",
width: "100%",
height: "100%",
code: "my.app.myapp",
id: "app"
}
);
which worked just fine for filling the screen.
Related
I have site with fixed header in angular material with z-index of 1100.
While i have some mat-menu in my site which overlap the header with z-index:1200 and had class cdk-overlay-container (angular materiel class) which is default behavior.
To override this i just decrease the cdk-overlay-container z-index to 1000 so that it go behind the fixed header and all things ok to me.
Problem
But when i open my material dialog which uses same cdk-overlay-container and same z-index it shows my fixed header above that overlay because of its high z-index, So any idea how to achieve the above scenario by adding different class to cdk-overlay-container so that my mat-menu goes behind the fixed header but my mat-dialog above all content.
Screen shoots
Normal scenario
https://www.screencast.com/t/XhB2szH3gZe
Problem scenario
https://www.screencast.com/t/fYrMYFEOd
I have one solution by type-script(that when dialog show lower the z-index of header) but i need some pure CSS solution.
Thanks!
I had similar issue with the full-screen CDK overlay container and the material dialog that should come above anything. The issue is, that if you use provided material elements like Dialog, Tooltip, Menu, they all work with overlay CDK. Then, on top, you may have your custom Overlay service that utilizes CDK. In my case, two cdk-container-overlay divs were created. z-index is 1000 by default and the latest instance overlap's when both overlays are required at the same time.
Some will yell that it is not Angular way, but in my case, I ended up adding a backdropClass to the config of the material dialog. Then, I simply select dialog backdrop's parentNode and manually add z-index on demand.
public openFeedbackDialog(): void {
this.dialog.open(FeedbackFormComponent, {
width: '450px',
maxHeight: '450px',
minHeight: '200px',
backdropClass: 'feedbackBackdrop',
hasBackdrop: true
})
window.document.querySelector<any>('.feedbackBackdrop').parentNode.style.zIndex = "1001"
}
I figured it out my self
Just override the z-index of cdk-overlay-container
In your style.scss
.cdk-overlay-container{
z-index:999; //lower then fixed header z-index so it goes behind it
}
and in your component dialog.scss
.cdk-overlay-container{
z-index:2000 !important; //higher then fixed header z-index so it comes above
}
Cheers!
You can solve the issue by using custom OverlayContainer class. You can find example with implementation here.
I'm having a problem which at first I thought it was the general configuration of my app and the height I was giving to my page wrapping classes. But I made a simple out of the box material ui tab example and it seems this is natural to material ui Tabs Component.
Material UI tabs component gives their tab container the same height, being that height the largest of all its containers. So if you have one tab content with lots of content in it, it makes the other tab contents just as large, even though they may only have one text field and a button in them.
How can I make it that the height of the container adjusts to the content of its own tab?
Here is a visual
Here is why TAB ONE is so large, TAB TWO is setting the height
Here is a webpackBin for you to see the code working and mess with it.
One hack I've done so far is setting a definite height and overflow, but I don't want to do that because it creates a double scroll bar (one in the tab container, one in the body) besides, it's buggy looking.
I would like it if the tab container (the one with the green border) adjusts to the content as it does in TAB TWO, BUT individually.
Thanks in advance!
If you set the height based on the given element's current visibility you will be able to resolve this issue.
Example
.react-swipeable-view-container > div[aria-hidden="false"] {
height: 100%;
}
.react-swipeable-view-container > div[aria-hidden="true"] {
height: 0;
}
Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.
Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG
animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:
<SwipeableViews
animateHeight // it will animate height on tab change
>
<div>{'slide 1'}</div>
<div>{'slide 2'}</div>
<div>{'slide 3'}</div>
</SwipeableViews>
Happy Coding ...!
There's a merge request that have been accepted here on the lib that could be interesting with a new method called updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359
<SwipeableViews
action={actions => {
this.swipeableActions = actions;
}}
animateHeight
>
<div>{'slide n°1'}</div>
<div>{'slide n°2'}</div>
<div>{'slide n°3'}</div>
</SwipeableViews>
Then:
componentDidUpdate() {
this.swipeableActions.updateHeight();
}
I am working on project which needs multiple ace editor instances running, all with auto completion feature enabled
I want increase the width of suggestion window presented by one particular alone. Changing the width using the below class works, but it applies for all the error instance, which i don't need.
div.ace_editor.ace_autocomplete {
width: 40%
}
Is there a way where i can specifically target one particular ace editor instance alone?
Autocompleters for each editor do not have any specific classes, so you need to modify them by javascript, either adding class or style
if (!editor.completer) {
// make sure completer is initialized
editor.execCommand("startAutocomplete")
editor.completer.detach()
}
editor.completer.popup.container.style.width="40%"
editor.completer.popup.container.classList.add("foo")
You could even use resize() to change the width of the specific editors instance:
var popup = editor.completer.popup;
popup.container.style.width="100px";
popup.resize();
Im trying to get a dynamic scrollpane in my JavaFX (FXML) application using CSS. my CSS for the scrollpane looks like this:
.scroll-pane {
-fx-width: 80%;
-fx-height: 80%;
-fx-background-color: #FF3333;
}
the color works, but the size properties don't if I open the CSS in JavaFX scene builder it doesn't show the height and width lines at all.
I assume im missing something pretty basic, but I can't seem to figure it out.
As far as I know you cant use -fx-width/-fx-height at all and you cant use percentage values for it. The width and height of elements are read-only. You can set -fx-pref-width, -fx-pref-height, -fx-max-width, -fx-min-width, -fx-max-height and -fx-min-height to adjust the size of Java FX elements.
Check the CSS Reference Documentation out to see which CSS styles are possible.
If you want to have the size as percentage you probably need to bind the size to another property.
As example:
myView.prefWidthProperty().bind(myOtherView.widthProperty().multiply(0.75));
There is another post about percentage values with the use of a GridLayout.
How do specify a width percentage in JavaFX 2 using FXML?
Is there a way to assign ContainerClass instead of ContainerCss in Simple Modal?
I am working on a website which should be responsive based on which device is being used, so for example for iPad I want the width and height of container smaller than larger screens. I have a CSS class based on #Media and would like to know if I could assign a class instead of CSS which creates style attribute in simple-modal container div.
Thanks.
Some simple jQuery in a callback should do the trick:
http://www.ericmmartin.com/projects/simplemodal/
$("#myModal").modal( {
onShow: function (dialog) {
$(this).addClass('myClass');
});
}});