Inline, side scrolling radio buttons « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Webfangler
Member

Hi

I want to use an image replacement for radio buttons and display them in-line.... this I’ve achieved.

However. I need to use over 100 images for this one field and currently they display inline to the page width then form new lines vertically making for rather a long page. Is there any way of making them display horizontally with a horizontal scroll bar to view the overflow? I’ve tried applying the standard width and overflow auto statements to the form container but this doesn’t seem to want to work....Any ideas?

Thanks

Posted 12 years ago on Friday March 2, 2012 | Permalink
Rob Harrell
Member

Got a link to your form so I can check it out?

Posted 12 years ago on Friday March 2, 2012 | Permalink
Webfangler
Member

Thanks

http://www.siliconefish.com/new/free-website/buy-now/

Site VERY much under development so excuse the mess! :-)

Posted 12 years ago on Friday March 2, 2012 | Permalink
Webfangler
Member

Sorry... Should have mentioned ... The relavent bit is step 4 of the form. Theres no required fields as yet so just step through.

Posted 12 years ago on Friday March 2, 2012 | Permalink
Webfangler
Member

Would it be possible to somehow wrap the radio buttons in somthing like this:

<div style="width:500px;height:150px;overflow-y:hidden;overflow-x:scroll;">
<p style="width: (total width of inline radio list);">

inline radio list here

</p></div>

Posted 12 years ago on Friday March 2, 2012 | Permalink
Rob Harrell
Member

From what you are describing, it looks like you may have figure this out already?

http://grab.by/cc5G

Posted 12 years ago on Friday March 2, 2012 | Permalink
Webfangler
Member

Hiya

Yep.. I've been fiddling :-)

I'm getting there by inserting the GF generated radio list into the div wrapper described above into one of GF's HTML fileds

Hoever, this only works when the GF radio button field that I coppied the list from is present in the form. If, like now, I delete the GF radio button field just leaving the HTML field then, on submit, it fails to deliver the image in the emailed form. I also cant work out how to get the list in the HTML field to insert it's selection to the DB.

I'm sure that was garbled and confusing! ... I've been going for 13 hours and I think it's now time to stop until Monday!

Thanks for looking at this for me.

Regards
Steve

Posted 12 years ago on Friday March 2, 2012 | Permalink
Rob Harrell
Member

Steve, yeah you aren't going to want to copy and paste code from the source into the HTML blocks. How about instead of doing that, you just target the container of that field to be a set width with the overflow? If you want to revert it back to standard radio options, we can take a look and try selecting that instead.

Posted 12 years ago on Friday March 2, 2012 | Permalink
Webfangler
Member

Hiya

OK.. I'll pospone turning the PC off for a mo :-)

Sorry, I'm being thick... Container of that field? ... Can you give me an example of what I'm looking for please?

Posted 12 years ago on Friday March 2, 2012 | Permalink
Rob Harrell
Member
OK dude, got it! So first, remove the gf_list_inline class, and that HTML block, then drop these styles in your theme's stylesheet:
```
[css]
li#field_2_26 ul {
width: 2000px;
}
li#field_2_26 ul li {
float: left;
}
```
http://grab.by/ccbE

You may just need to adjust that width higher as needed, pending the items you ad. Let me know how it goes!
Posted 12 years ago on Friday March 2, 2012 | Permalink
Webfangler
Member

Hi Rob

Thanks for your help.

The code you detail was my original starting point and I'm afraid it dosen't work:
http://www.siliconefish.com/new/wp-content/uploads/2012/03/ScreenHunter_02-Mar.-05-10.40.jpg

I'm still playing and will gey back to you if... when... I solve it. If you have any other ideas I'm all ears!

Thanks

Posted 12 years ago on Monday March 5, 2012 | Permalink
Webfangler
Member

Got it :-) ... I just needed some sleep!

/* styling */
body .gform_wrapper ul.gfield_radio li input[type="radio"]:checked+label img{
border:solid green 2px;
}
body .gform_wrapper img{
border:solid white 2px;
}
.gf_list_inline label{
cursor:pointer
}
#field_2_26 input[type="radio"] {
display:none
}

/*positioning */
#field_2_26 {
width:680px;
height:230px;
overflow-y:hidden;
overflow-x:scroll;
}
#field_2_26 ul {
width:250%; /* adjust PX or % as list grows */
}
#field_2_26 li {
display:inline-block;
}

Resulting in: http://www.siliconefish.com/new/free-website/buy-now/ (step 4)

Thanks for all your help Rob.

Posted 12 years ago on Monday March 5, 2012 | Permalink
Webfangler
Member

OOps ... slight amendment to the pointer...

body .gform_wrapper ul.gfield_radio li input[type="radio"]:checked+label img{
border:solid green 2px;
cursor:pointer;
}
body .gform_wrapper img{
border:solid white 2px;
cursor:pointer
}

#field_2_26 {
margin-left:9px;
width:680px;
height:230px;
overflow-y:hidden;
overflow-x:scroll;
}
#field_2_26 ul {
width:250%;
}
#field_2_26 li {
display:inline-block;
}
#field_2_26 input[type="radio"] {
display:none;
}

Posted 12 years ago on Monday March 5, 2012 | Permalink
Rob Harrell
Member

Right on, glad to help out!

Posted 12 years ago on Monday March 5, 2012 | Permalink

This topic has been resolved and has been closed to new replies.