I have been two days searching if there's any way to change the checkmark size, I have read others post, about how to change the checkmark color https://stackoverflow.com/questions/59347989/changing-the-color-of-the-angular-material-checkbox-checkmark?r=SearchResults&s=1|153.9657, size of the checkbox Change the size of angular material checkbox (mat-checkbox), etc but I don't see how I could change checkmark size.
And every single property that I try to change in the web inspector or doesn't make any change or change also the checkbox size.
Related
I'm working with the .addOnScreenmenu method on a ChartXY.
Demo: https://www.arction.com/lightningchart-js-interactive-examples/edit/lcjs-example-0706-onScreenMenu.html?theme=lightNew&page-theme=light&isList=false
Documentation: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#addonscreenmenu
I found that you can change the size of the fly out menu icons by changing the dimension, but I can't seem to find a way to change the size of the main button that triggers the fly out. Thoughts?
I try to stylizing a Material Checkbox (https://material.angular.io/components/checkbox/overview). There are several things that I have done without problems (like change color, border etc). I would like, but I can't seem to do it, only when the checkbox is unchecked, display the checkmark on hover. As the example on the right in the picture, this to indicate that we can click on the checkbox checkbox-hover
Any ideas ? Thank you !
The checkmark is hidden by setting the SVG path's stroke-dashoffset to ~23px.
In order for the checkmark to be shown on hover you'll want a CSS rule to set this value to 0px and supply a background colour to the checkbox so the checkmark can be seen.
I have created a Stylebook component that has a toolbarstyle. All toolbars in my app have this stylelookup. This style consists of a TLayout filled with a TRectangle that has the stylename "background" that has the color red by default.
I want to let the user set the color of the toolbar with a TComboColorBox.
So when they choose a Color I want all the toolbars to change to the color they have picked.
Now I already know how to change the style for a single toolbar, but I don't want to set the property for each individual toolbar. With the code below I can change the style color for a single toolbar.
ToolBar1.StylesData['background.Fill.Color'] := ComboColorBox1.Color;
How can I do the same for all my toolbars at once? I gues change the StyleBook but how. Also the stylebook from my MainForm get's loaded in all my other forms too, so I also don't need to change it on every form.
After trying to find a solution for Centering Text on a Button with Offset, I'm doing now a custom component.
The goal is to make a button-like component that has an icon on one side and a centered text filling the rest of the button.
The component contains either two Label/ Buttons to display the Icon and text. Both of them have a background Image, defined in css.
The css looks like this for Icon and the text with exchanged image as background for text
#button-icon-cancel{
-fx-font-family: "Arial";
-fx-padding: 0,0,0,0;
-fx-background-color: transparent;
-fx-font-size: 28px;
-fx-graphic: url('images/button/cancel.png');
}
#button-icon-cancel:pressed{
-fx-graphic: url('images/button/cancel-pressed.png');
}
The images are loaded by setId(). Currently both components are added to a Panel before passing to the stage. They contain an OnClickEvent for processing.
Now to the actual question
How can I achieve that if one Component is clicked, the other one is getting the :pressed from css as well?
Adding the ClickEvent to the Panel is doing nothing (regarding clicking on either Label/ Button)
Adding both of them to a HBox, adding the Event to the HBox work in that regard, that I can click either component and the Event gets fired, BUT the :pressed State is only applied to the component you clicked.
Is it possible to give all childs the notification, that they should behave like they got pressed? Since we have a lot of small Icon, but only one background for the text, placing a Label over the whole thing create a lot of unneeded wasted Image space. Also this would cause the problematic for changing font color if not all css are changed at once (the label-over-button-solution with .setMouseTransparent(true) wouldn't change the font color of the text label since the label doesn't notice button is pressed)
First of all, JFX-8 will support wider range of css improvements, which will allow you to solve the issue easier.
To solve your issue, i can suggest the following : each node have a pressed property. You can add a listener on this property, and when it changes to true, use setStyle(String) method on needed nodes, and use setStyle(null | "") on changing to false.
Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.