Hello All, I need some help. Full disclaimer: I am out of my comfort zone with CSS.
I would like to create something similar to this (from another APEX App that I use) in my own APEX page. I know there is a lot going on here, but simply turning a Radio Control (or even simple Buttons) into larger, prettier targets is escaping me.
Just making each option into a 100px by 100px square would get me started.
Anyone able to give me apointer in the right direction? I dont know what CSS to use, or where to put it. Ideally it would sit on each object individually, but adding something inline on the page could also work...
As always I would appreciate any help very much indeed.
George ...
Vinish Kapoor
You can try the below CSS for a button. Follow these steps:
Create a button.
Specify a static id as btnYes.
Set as Hot button.
Specify a smiley icon.
Then add the below CSS in the Page > Inline CSS section:
VFP George
Hey Vinish,
Thanks very much for that. I also (by trial and a lot of error) ended up with this in "Custom Attributes" directly on the object itself.
style= "background-color: blue; color:white; font-size:150%;height: 300px; width: 300px"
Seems (i) I have a lot to learn about CSS, and (ii) there are many ways to achieve our goals still!
I would like to style the Icon to "Fill" the square more. Currently it is fixed in size. Is it possible to make it larger? Should I use margins, set to zero - I tried this but got nowhere so far...
George ...
Vinish Kapoor
Yes, the custom attribute is the shortcut 😀.
And I tried increasing the size of icons, but it was not happening.
So you can use the image instead of the icon. To do this, upload small images for buttons in the Shared Components > static files.
Then you can use it in your CSS. Just add one more CSS to your style attribute as below:
VFP George
Thanks Vinish, that fixed the issue and I am moving on now.
George ...