I have a form which contains multiple input widgets like textbox, dropdown, textarea, suggestbox, radiogroup and multiselect etc
The input widgets are by default in disabled state.
When I click on a button all of them get enabled.
I would also like their text-color to change when I click on that button.
Note: I dont want to change the widget's label color. Only the value color.
How to do it in code for each? If you could give one example for each widget i.e textbox, dropdown, multiselect,radigroup etc
Looking for a generic solution.
Say you want to change your text box text red when you click the button. add a class to your styles tab like
.red{
color: red;
}
then say you have text box called textbox1 in the onclick event of your button put the following code:
widget.root.descendants.textbox1.styles = ['red'];
same for all the other types
To give you an idea I was testing with TextBox and worked but with TextAreas the Input or Value did not change, as well as the other multiselect and radioGroup options it did not take the css as expected.
When you click on the text box and from the CSS Page Style you start typing "." you will find different options for the widget selected. Using TextBox there is an Input option so you create a Global Style like this one.
.color Input{
color:teal;
}
This will change the Input of the TextBox, the same as if you do with Label, just use the same css class just change the option you want to modify. .color Label {}.
Also to apply the change to the widget just create a function like this one.
function textBoxColorChange() {
app.pages.NewPage.descendants.TextArea1.styles = ["color"];
}
And create an OnClick event to a button to make the change.
With the other widgets I don't have the time to keep testing but I hope this helps to get the idea. Greetings.
Related
I have a website with a list of checkboxes that can be used for printing as well. Though when printing it should print a clean slate, not the current state of the checkboxes on the website. However, I don't want to clear the state on the page itself, only on the printed version.
So is it possible to visually remove the tick from checkboxes in CSS?
Something like:
#media print
{
input[type=checkbox]
{
tick: none;
}
}
I suggest following approach.
In print you want just the border square box which can be manually ticked, right?
So in print CSS you might just change the design of check boxes so that you hide the original checkbox html , doesn't matter if checked or not. And then just style or show a square border box using some pseudo selector like : before :after, , good enough for a checkbox looking box for printing.
As via CSS you can change design and not the html state of the forms. So in media query of print or print style sheet only option is designing, styling...
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
As I know, there are three types of buttons in LibGDX:
TextButton, ImageButton and ImageTextButton
I need to create a button with my own background and own text and of course, but I also need a hover option.
The hover is available in ImageButton, but ImageButton doesn't have a label so I can't assign any text to it.
There is a third option, ImageTextButton, but it's not a normal button, it's a button and a label which is set next to it (which is unacceptable, cause I need the text on the button).
Is there any option to achieve this?
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.
On some of my pages I am setting focus on a first input element:
$(':input:visible:first').trigger('focus');
If the first input element is a checkbox or a radiobutton it receives a focus fine but that's not clearly visible, so it's label is not highlighted and screen reader doesn't recognize that, too, i.e. it doesn't read out that field. Is there any way using JQuery to make focus on checkbox or radoibuttons more pronounced?
Can't you assign a suitably clear css class to it?
$(':input:visible:first').focus(function() {
$(this).addClass("superClear")
})
.blur(function() {
$(this).removeClass("superClear");
}).focus();
Also, this might be helpful:
How do I style (css) radio buttons and labels?