I have the following code, which displays the images in my table with no border, then an orange border when hovered over:
table.test {
}
.test img {
border: solid 4px transparent;
}
.test img:hover {
border-color: orange;
}
If it try the following, i expect the border to stay orange after click, but it does not
.test img:active {
border-color: orange;
}
The images being used are thumbnail size instead of checkboxes.
Any ideas how I can keep the border orange after click?
Images cannot use active. http://www.whatwg.org/specs/web-apps/current-work/multipage/selectors.html#selector-active.Wrap it within an anchor and prevent default on the anchor click and change the cursor maybe?
check this fiddle might help you using simple jquery let you give your output
$('.test img').on('click', function(){
//use jquery css function
$(this).css({"border-color":"orange"});
// or add class .active with your own style
$(this).addClass('active');
})
make your image as block element and add this jquery click event. solved
You can create a class called orangeborder (or anything, really). Give it the attributes of border-color:orange;.
Then you can use jQuery and use:
$('img').click(function(){
$(this).toggleClass('orangeborder');
});
jsFiddle
Related
I'm using leaflet.editable to modify geoJSON objects and I would like to show a tooltip for the vertices with the gps coords in it. Is there a way to modify the vertices to set the tooltip and possibly even the icon used?
Overwrite to default enableEdit function for every layertype: (You have to programm by yourself, that the tooltips showing always!)
L.Polygon.prototype.enableEdit = function (map) {
if (!this.editor) this.createEditor(map);
this.editor.enable();
this.editor.editLayer.eachLayer(function(layer){layer.bindTooltip(""+layer.getLatLng()).openTooltip(); });
return this.editor;
}
The fastest way to change the icon, is to change the css style:
.leaflet-div-icon {
background: #c72e2e; //maybe you have to add !important
border-radius: 50%;
}
Also you can try to change the VertexIcon https://github.com/Leaflet/Leaflet.Editable/blob/bffa390d3f4caaeb74f74ceba460adc8f283d340/src/Leaflet.Editable.js#L439
When I change the color of the prompt-text, either via setStyle() or directly through CSS, when I click on the TextField, first of all, it won't auto-clear it and because of it, the "bar" that usually pops when you're about to write in a field is all the way to the left - as you can see in the following pictures:
In the first picture the Username TextField is focused, which has its prompt-text color changed to #000000 (black).
In the second picture the Password TextField is focused, which has default prompt-text settings. Nothing is changed about it.
I looked through the JavaFX API Documentation, numerous StackOverflow cases about the TextFields in general, CSS cases on other forums, the modena.css (.text-input) and so on. I haven't seen anywhere someone with a problem like mine where the solution proposed has worked for me.
In most cases people suggest to use -fx-prompt-text-fill: transparent;, but that makes all of prompt-texts everywhere empty regardless of whether they're focused or not.
Some of the variations I tried as well for the text-input Class are these:
.text-input, .text-input:focused {
-fx-prompt-text-fill: derive(-fx-control-inner-background, 0%);
}
.text-input .text-input:focused {
-fx-prompt-text-fill: transparent;
}
.text-input, .text-input:focused {
-fx-prompt-text-fill: transparent;
}
I've spent 8-10h looking and trying to figure out a solution, but I'm just not knowledge-able enough about JavaFX/CSS. Some help would be really appreciated.
EDIT 1:
.text-input {
-fx-prompt-text-fill: <your-color>;
}
.text-input:focused {
-fx-prompt-text-fill: transparent;
}
This works, but it's applied to all TextFields. Not to a specific one, which is what I'm looking for.
#myId {
-fx-prompt-text-fill: <your-color>;
}
#myId:focused {
-fx-prompt-text-fill: transparent;
}
This also works, as long as I leave it as is. When I click a button that does only this: txtUsername.setStyle("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");, the color changes but then it seems to ignore the myId:focused. Like it's not there.
.my-styleclass {
-fx-prompt-text-fill: <your-color>;
}
.my-styleclass:focused {
-fx-prompt-text-fill: transparent;
}
This works as well, but when I apply the above mentioned setStyle(), the same thing as when working with the ID happens. It ignores the focused part in the CSS.
I found this example that works with bindings.
txtUsername.styleProperty().bind(Bindings.when(txtUsername.focusedProperty())
.then("-fx-prompt-text-fill: transparent;")
.otherwise("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";"));
It does exactly what I want it to do, but I'd like to avoid using it and only styling the CSS if possible.
Why? I'm trying to make an application that people can customize. I'd like them to be able to change colors of certain parts of the application and the prompt-text of TextField is one of them. I use setStyle() to apply changes so they can preview it. Once they click "Save", all of the applied styles are to be saved in a .css file and then the program will load that file as it's stylesheet once restarted.
EDIT 2: Found a solution here.
CSS:
.root{
username-prompt-text-fill: #000000;
}
#txtUsername{
-fx-prompt-text-fill: username-prompt-text-fill;
}
#txtUsername:focused{
-fx-prompt-text-fill: transparent;
}
JAVA:
txtUsername.setStyle("username-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");
Use the following CSS to customize the prompt text fill while still having it disappear when focused:
.text-input {
-fx-prompt-text-fill: <your-color>;
}
.text-input:focused {
-fx-prompt-text-fill: transparent;
}
If you want to target a specific TextField, give it an ID and target the ID in the CSS file.
textField.setId("myId");
#myId {
-fx-prompt-text-fill: <your-color>;
}
#myId:focused {
-fx-prompt-text-fill: transparent;
}
If many TextFields should have the same style, consider giving them all a custom style class.
textField.getStyleClass().add("my-styleclass");
.my-styleclass {
-fx-prompt-text-fill: <your-color>;
}
.my-styleclass:focused {
-fx-prompt-text-fill: transparent;
}
Note: The id/style classes can be set/added via FXML as well. If you use fx:id only, the id will be the same value, otherwise id is used for CSS and fx:id is used for field injection.
For more information, see JavaFX CSS Reference Guide.
The solution in this question and Slaws' answer helped me get to the solution of my problem.
CSS:
.root{
username-prompt-text-fill: <color>;
}
#txtUsername{
-fx-prompt-text-fill: username-prompt-text-fill;
}
#txtUsername:focused{
-fx-prompt-text-fill: transparent;
}
JAVA:
txtUsername.setStyle("username-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");
https://i.stack.imgur.com/Y76Fl.png
On this picture on left side - running java program, and right side - Scene builder layout.
This is my github code: https://github.com/captsmile/calc
You can do the following code in .css file
.button
{
-fx-background-color: transparent;
}
This will make the color of button as the color of your application's background color(due to transparency).
Furthermore you may also apply some effects to make your button looks more cool. To add effects
.button:hover
{
-fx-background-color: yellow;
}
.button:pressed
{
-fx-background-color: brown;
}
At the end ,you may attach the case file with your file(suppose index.java file in which you want to apply css) by writing following code in your index.java
scene.getStylesheets().add(getClass().getClassLoader().getResource("application.css").toExternalForm());
Where application.css is the css file with whole css code given above . This application file must be present in your src folder.
I fixed this removing border at GridPane
.root{
-fx-padding: 5;
-fx-border-style: none;
-fx-border-width: 0;
-fx-border-insets: 0;
}
This is how you can do it in scenebuilder
Choose the button by clicking on it.
Then in properties->Style
Choose "-fx-background-color"
and put value as " transparent"
Like this
You can do it by JavaFX CSS selectors on the button.
The answer in this link check it out, and there are also many JavaFX related examples you may interested in:
http://tutorials.jenkov.com/javafx/button.html
I'm using Grid (multiselect mode) in Vaadin for data representation and i've got a question:
How to remove select/deselect checkbox in header?
Screenshot
In order to avoid mouse clicks on the cell to toggle the checkboxes you can use the CSS property pointer-events.
I've added the style hide-checkbox to my grid and then used the following css to hide the checkbox and prevent click events (Vaadin 7):
.v-grid-hide-checkbox th .v-grid-select-all-checkbox {
display: none;
}
.v-grid-hide-checkbox th:first-child {
pointer-events: none;
}
You could use css to hide it, something like
.v-grid-select-all-checkbox {
display: none;
}
should work.
If course the checkbox is still there so by using browser's developer tools it's possible to make it visible.
I have a TextArea() and would like to hide the vertical/horizontal scroll bars. I see that the control seems to have a built in scroll-pane that shows as needed.
TextArea numberPane = new TextArea();
numberPane.setEditable(false);
numberPane.setMaxWidth( 75 );
// Set the characteristics of our line number pane
numberPane.setId( "line-number-pane" );
In my CSS file I have the follow settings.
#line-number-pane
{
-fx-text-fill: white;
-fx-background-color: black;
-fx-font: 12px "Courier New";
-fx-font-family: "Courier New";
-fx-font-weight: bold;
}
#line-number-pane .scroll-pane
{
-fx-hbar-policy : never;
-fx-vbar-policy : never;
}
As expected the text area font/color/size works just fine. However, the scroll-pane policy doesn't seem to work.
Should I be able to hide the scroll bars via the CSS file or is there some code that will do the trick.
Thanks.
From How can I hide the scroll bar in TextArea?:
Remove Horizontal Scrollbar
textArea.setWrapText(true);
Remove Vertical Scrollbar
ScrollBar scrollBarv = (ScrollBar)ta.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
CSS
.text-area .scroll-bar:vertical:disabled {
-fx-opacity: 0;
}
I just did it very simply using a StyleSheet:
CSS
.text-area .scroll-bar:vertical {
-fx-pref-width: 1;
-fx-opacity: 0;
}
.text-area .scroll-bar:horizontal {
-fx-pref-height: 1;
-fx-opacity: 0;
}
No need for all that whacky code.
I observed code of TextAreaSkin class, and found, that a
void layoutChildren(x, y, w, h) method, which is called "during the layout pass of the scenegraph" and de facto, each time, when something happens with a control, contains a code, which changes hbarPolicy and vbarPolicy between AS_NEEDED and NEVER, according to the current state of control.
So, looks like, there is no chance to do somethign with it, using a css.
Try to just make scrollbars invisible. But, as I see code of ScrollPaneSkin, scrollBars are created once, but their visibility state seems to change during the control is working, so, instead of using setVisible(false) (which will be ignored in the nearest layout), try to use a setOpacity(0.0). (I'm not sure, it will work, but it worth to try).
Also, instead of CSS using, you can apply a recursive search of scrollBars in a control structure, using a Parent.getChildrenUnmodifiable() method, and make them invisible manually.