I am trying to create a rating field that look like this.
https://www.dropbox.com/s/theys6yqvibqzc9/Rating%20Field.jpg?dl=0
It has a label at each end of the rating selection. I’ve experimented with both radio buttons and the survey field. I tried using the field description with some embedded CSS but on a mobile device both labels display at the bottom under the radio buttons.
I thought I had a solution using the first and last choice items as the labels and set the opacity of the table cell that contained the radio button to 0. Unfortunately the labels are moved into the same “hidden” cell as the radio button when viewed on a mobile device.
I tried using horizontal radio buttons but can’t get the label numbers to display above the radio button. I can get them to display below them but not above.
GF support suggested the Gravity Slider Fields plugin. It is along the lines I am looking for but I would prefer radio buttons. They also suggested I post here in case someone here has done something along similar lines.
Is there a way to do this? Some custom CSS or JavaScript I haven’t thought of? Just thinking now, would it be possible to use a filter or hook to break the description into two parts and display one before the radio buttons and the other after.
Many Thanks