PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Inline, side scrolling radio buttons

  1. 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 8 years ago on Friday March 2, 2012 | Permalink
  2. Got a link to your form so I can check it out?

    Posted 8 years ago on Friday March 2, 2012 | Permalink
  3. Thanks

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

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

    Posted 8 years ago on Friday March 2, 2012 | Permalink
  4. Sorry... Should have mentioned ... The relavent bit is step 4 of the form. Theres no required fields as yet so just step through.

    Posted 8 years ago on Friday March 2, 2012 | Permalink
  5. 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 8 years ago on Friday March 2, 2012 | Permalink
  6. From what you are describing, it looks like you may have figure this out already?

    http://grab.by/cc5G

    Posted 8 years ago on Friday March 2, 2012 | Permalink
  7. 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 8 years ago on Friday March 2, 2012 | Permalink
  8. 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 8 years ago on Friday March 2, 2012 | Permalink
  9. 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 8 years ago on Friday March 2, 2012 | Permalink
  10. 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 8 years ago on Friday March 2, 2012 | Permalink
  11. 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 8 years ago on Monday March 5, 2012 | Permalink
  12. 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 8 years ago on Monday March 5, 2012 | Permalink
  13. 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 8 years ago on Monday March 5, 2012 | Permalink
  14. Right on, glad to help out!

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

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