Button selection visual confirmation

  • Resolved dev5

    (@dev5)


    3 days, 18 hours 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)

    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)

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

    Thread Starter dev5

    (@dev5)

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

    • This reply was modified 2 days, 19 hours ago by dev5.
    Plugin Author EDGARROJAS

    (@edgarrojas)

    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)

    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)

    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)

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

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

    Plugin Author EDGARROJAS

    (@edgarrojas)

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

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

    Thread Starter dev5

    (@dev5)

    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)
  • You must be logged in to reply to this topic.

Tags