Button selection visual confirmation

Resolved dev5
(@dev5)

1 year ago

Hi,

Instead of radio buttons I tried using the button field. Works great and I styled them, but there’s no way a user knows they made a selection. The selected and unselected buttons appear the same.

Is there a method to create a visual indication a button was selected such as changing the button color or moving it over and down as if pressed?

Thanks

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author

EDGARROJAS

(@edgarrojas)

1 year ago

Oh there should actually be a different style for selected elements

SNAG_Program-0000.png

Is the element not styled for you? did you style the element using custom css?

Thread Starter

dev5

(@dev5)

1 year ago

No – I didn’t use CSS to style it, just the editor.

Thread Starter

dev5

(@dev5)

1 year ago

Where is there a mouseover or selected condition to set in the editor?

This reply was modified 1 year ago by dev5.

Plugin Author

EDGARROJAS

(@edgarrojas)

1 year ago

There is no designer for hover or selected options (i will add this in the todo list) but you can style them with css for example this for hover

.option_item:hover {
background-color:red;
}

and this for selected:

.option_item.rnSelected {
background-color:blue;
}

Regards!

Thread Starter

dev5

(@dev5)

1 year ago

Thank you. I tried using that CSS but can’t make it work. My CSS is below. Can you give me some pointers?

.rnField_10 is the buttons

.rnField_10 .option_item label{font-size:16px !important;line-height:16px !important;color:#000000 !important;font-weight:bold !important;}
.rnField_10 .option_item{background-color:#4acf4d !important;border-style:solid !important;border-top-width:2px !important;border-right-width:2px !important;border-bottom-width:2px !important;border-left-width:2px !important;border-color:#0e0e0e !important;border-top-left-radius:6px !important;border-top-right-radius:6px !important;border-bottom-left-radius:6px !important;border-bottom-right-radius:6px !important;}
.rnField_10.rnField{margin-top:1px !important;margin-right:1px !important;margin-bottom:12px !important;margin-left:1px !important;}
.rnField_10  .buttonselectoritem{min-height:42px !important;}
.rnField_2  button,.rnField_2  .RNIconOrImage{color:#000000 !important;}
.rnField_2  button{background-color:#4acf4d !important;border-color:#000000 !important;border-top-width:2px !important;border-right-width:2px !important;border-bottom-width:2px !important;border-left-width:2px !important;font-size:16px !important;line-height:16px !important;padding-left:60px !important;padding-right:60px !important;padding-bottom:10px !important;padding-top:10px !important;border-top-left-radius:6px !important;border-top-right-radius:6px !important;border-bottom-left-radius:6px !important;border-bottom-right-radius:6px !important;}
.rnField_2  rn-spinner-button{text-align:center !important;}
.rntext .rednaoLabel label{font-size:15px !important;line-height:15px !important;}
.rnemail .rednaoLabel label{font-size:15px !important;line-height:15px !important;}
.rnbuttonselection .rednaoLabel label{font-size:15px !important;line-height:15px !important;}
.rncheckbox .rednaoLabel label{font-size:15px !important;line-height:15px !important;}
.rnnumeric .rednaoLabel label{font-size:15px !important;line-height:15px !important;}
.rnbuttonselection .option_item label{font-size:16px !important;line-height:16px !important;}
.rnsubmit_button  button{font-size:16px !important; font-weight: bold !important; line-height:16px !important;}
.rnField_21 .rednaoLabel label{font-size:15px !important;line-height:15px !important;}
.rnField_18 .rednaoLabel label{color:#cf2323 !important;}
.rnField_20 input{}
.rnField_20 .rednaoLabel label{color:#cf2323 !important;}
.rnField_12 .rednaoLabel label{color:#cf2323 !important;}

Plugin Author

EDGARROJAS

(@edgarrojas)

1 year ago

The styles look fine, Could you send me a link to the form so see the styles applied in a form?

Thread Starter

dev5

(@dev5)

1 year ago

https://artisticbamboo.com/contact-us/

It still needs the hover and selected styles which didn’t work for me.

Plugin Author

EDGARROJAS

(@edgarrojas)

1 year ago

I see, try putting the !important keyword to the styles and try again, example:

.buttonselectoritem:hover {
border-color: red !important;
}

Thread Starter

dev5

(@dev5)

1 year ago

That did it – perfect! Thank you for the great support. I thought I had tried adding that, but ???

It’s a very nice form builder. I haven’t used all the features yet, but things like conditional are very nice and I hope to keep going deeper.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Button selection visual confirmation’ is closed to new replies.

Tags