https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons Gravity Support Forums Topic: Inline, side scrolling radio buttons en-US Mon, 20 Apr 2026 01:12:28 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51281 Mon, 05 Mar 2012 08:19:12 +0000 Rob Harrell 51281@https://legacy.forums.gravityhelp.com/ <p>Right on, glad to help out! </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51278 Mon, 05 Mar 2012 07:45:55 +0000 Webfangler 51278@https://legacy.forums.gravityhelp.com/ <p>OOps ... slight amendment to the pointer...</p> <p>body .gform_wrapper ul.gfield_radio li input[type="radio"]:checked+label img{<br /> border:solid green 2px;<br /> cursor:pointer;<br /> }<br /> body .gform_wrapper img{<br /> border:solid white 2px;<br /> cursor:pointer<br /> }</p> <p>#field_2_26 {<br /> margin-left:9px;<br /> width:680px;<br /> height:230px;<br /> overflow-y:hidden;<br /> overflow-x:scroll;<br /> }<br /> #field_2_26 ul {<br /> width:250%;<br /> }<br /> #field_2_26 li {<br /> display:inline-block;<br /> }<br /> #field_2_26 input[type="radio"] {<br /> display:none;<br /> } </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51277 Mon, 05 Mar 2012 07:35:27 +0000 Webfangler 51277@https://legacy.forums.gravityhelp.com/ <p>Got it :-) ... I just needed some sleep!</p> <p>/* styling */<br /> body .gform_wrapper ul.gfield_radio li input[type="radio"]:checked+label img{<br /> border:solid green 2px;<br /> }<br /> body .gform_wrapper img{<br /> border:solid white 2px;<br /> }<br /> .gf_list_inline label{<br /> cursor:pointer<br /> }<br /> #field_2_26 input[type="radio"] {<br /> display:none<br /> }</p> <p>/*positioning */<br /> #field_2_26 {<br /> width:680px;<br /> height:230px;<br /> overflow-y:hidden;<br /> overflow-x:scroll;<br /> }<br /> #field_2_26 ul {<br /> width:250%; /* adjust PX or % as list grows */<br /> }<br /> #field_2_26 li {<br /> display:inline-block;<br /> }</p> <p>Resulting in: <a href="http://www.siliconefish.com/new/free-website/buy-now/" rel="nofollow">http://www.siliconefish.com/new/free-website/buy-now/</a> (step 4)</p> <p>Thanks for all your help Rob. </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51275 Mon, 05 Mar 2012 07:09:58 +0000 Webfangler 51275@https://legacy.forums.gravityhelp.com/ <p>Hi Rob</p> <p>Thanks for your help.</p> <p>The code you detail was my original starting point and I'm afraid it dosen't work:<br /> <a href="http://www.siliconefish.com/new/wp-content/uploads/2012/03/ScreenHunter_02-Mar.-05-10.40.jpg" rel="nofollow">http://www.siliconefish.com/new/wp-content/uploads/2012/03/ScreenHunter_02-Mar.-05-10.40.jpg</a></p> <p>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!</p> <p>Thanks </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51188 Fri, 02 Mar 2012 19:53:51 +0000 Rob Harrell 51188@https://legacy.forums.gravityhelp.com/ <p>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:</p> <pre><code>[css] li#field_2_26 ul { width: 2000px; } li#field_2_26 ul li { float: left; }</code></pre> <p><a href="http://grab.by/ccbE" rel="nofollow">http://grab.by/ccbE</a></p> <p>You may just need to adjust that width higher as needed, pending the items you ad. Let me know how it goes! </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51181 Fri, 02 Mar 2012 18:11:36 +0000 Webfangler 51181@https://legacy.forums.gravityhelp.com/ <p>Hiya</p> <p>OK.. I'll pospone turning the PC off for a mo :-)</p> <p>Sorry, I'm being thick... Container of that field? ... Can you give me an example of what I'm looking for please? </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51177 Fri, 02 Mar 2012 18:05:10 +0000 Rob Harrell 51177@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51176 Fri, 02 Mar 2012 18:02:07 +0000 Webfangler 51176@https://legacy.forums.gravityhelp.com/ <p>Hiya</p> <p>Yep.. I've been fiddling :-)</p> <p>I'm getting there by inserting the GF generated radio list into the div wrapper described above into one of GF's HTML fileds</p> <p>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.</p> <p>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!</p> <p>Thanks for looking at this for me.</p> <p>Regards<br /> Steve </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51169 Fri, 02 Mar 2012 17:23:22 +0000 Rob Harrell 51169@https://legacy.forums.gravityhelp.com/ <p>From what you are describing, it looks like you may have figure this out already?</p> <p><a href="http://grab.by/cc5G" rel="nofollow">http://grab.by/cc5G</a> </p> https://legacy.forums.gravityhelp.com/topic/inline-side-scrolling-radio-buttons#post-51164 Fri, 02 Mar 2012 16:31:24 +0000 Webfangler 51164@https://legacy.forums.gravityhelp.com/ <p>Would it be possible to somehow wrap the radio buttons in somthing like this:</p> <p>&lt;div style="width:500px;height:150px;overflow-y:hidden;overflow-x:scroll;"&gt;<br /> &lt;p style="width: (total width of inline radio list);"&gt;</p> <p>inline radio list here</p> <p>&lt;/p&gt;&lt;/div&gt; </p>