button backgroundColor issue

[ppbedz]

Hi,

I have a grid that contains a button in each row. If the button is clicked, I am using Javascript to change the color of the button to show the user that the data was selected. I also set the value of a hidden check box field. My issue is that when the screen is redisplayed, the backgroundColor property reverts to the original color of the row (the check box value remains in tact). Is there a way to make sure the backgroundColor set by the javascript is not reset when the screen redisplays?

Thank you,
Patti

Note: The reason I am using button/hidden check box is because the check box size cannot be made larger (that I know of).

[Scott Klement]

Patti,

The background color property is not bi-directional. Data sent from your RPG program will be put into the property, but if you change it with JavaScript, it will not be sent back to your RPG. Therefore, the next time the RPG program displays the screen, it will revert back to whatever the RPG program has in it's variables.

Can I ask why you are doing this? A button changing colors is an unusual design. Have you considered using the Row Selection feature of the grid?

Also -- it *is* possible to change the size of a checkbox using CSS. CSS has a "transform" ability that can be used to multiply the size... the code would be something like this:

Code: Select all

.bigger-checkbox {
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* Firefox */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
}

All of the browsers have an ability like this, even though it hasn't really been standardized. so in the above example, you provide the -ms- one for Microsoft,. -moz- for Firefox, -webkit- for Chrome and Safari, and -o- for Opera. Each browser will only use it's own setting, but since this CSS class has settings for all of the major browsers, it should work just about everywhere. (Unless you are using some less common browsers, like Konqueror for example... but probably not!)

Not sure that I would exactly "recommend" that technique... it can be ugly (my opinion). But, you can give it a try and see what you think.

There are several other possibilities, too... instead of a checkbox, you could use row selection, or a drop down, or a slider... Or even create a custom widget of your own.

Just food for thought...

[ppbedz]

Thank you Scott. I'll try another approach.

[ppbedz]

Scott,

The check box size issue is back. I want to try to use your code w/TRANSFORM. Where would I put it?

Thank you,
Patti

[Scott Klement]

You should put it into a CSS file. There are many different schools of thought on how that should be done... but...

Perhaps the best thing is to create something like "mcgard.css" where you put all of your own custom CSS selectors, including this "bigger checkbox" one. A good way to do that is to put it into /www/YOUR-INSTANCE/htdocs/profoundui/userdata/custom/css/mcgard.css, this will be automatically picked up by the Visual Designer and Rich Display Sessions. To also make it available in Genie, edit your start.html, and add a link tag like this:

Code: Select all

<link href="/profoundui/userdata/custom/css/mcgard.css" rel="stylesheet" type="text/css" />

Make sure that comes after the link tags that have the CSS files for profoundui and your skin. (That gives it precedence over those other ones.)

Add the "bigger-checkbox" code that was shown in the earlier message to that css file. As you come up with more css classes you want to use, keep adding them to the end of the file. In addition to making checkboxes larger, it is a great way to create styling for all of your widgets without manually setting things like the font, font size, color, etc on every single widget you create.

Once it is in the css file, reload/refresh your session to pick up the changes. Then, set the css class property of the widget (or right click and add css class 2, css class 3, etc, to get a new css class field) to bigger-checkbox.

[ppbedz]

Thank you, Scott!