Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!

Q

In a survey form, how would I edit the code to display radio buttons side-by-side?

I was able to get the html code; but don't know how to edit the source. Does this also in CSS? where? Pl help
Last Updated: Jan 18, 2012  |  986 Views

Was this helpful? 2   0
A

Answer

You can do this by editing your survey's CSS. Here's what to do:

  • Head to the Survey tool, & click "edit survey"

  • In the box on the right-side of the screen, there are 3 tab settings options. Click the 2nd tab, "Form Style"

  • You'll see this line of CSS near the top:
    .survey_display .question_selection { padding-top: 5px; padding-bottom: 5px; padding-left: 22px;}

  • To that line, add the following red text, so it looks like this:
    .survey_display .question_selection { padding-top: 5px; padding-bottom: 5px; padding-left: 22px; display:inline; position:relative;}

  • Here's a screenshot of the end result:
Here's an example of what it will look like: http://springylib.campusguides.com/survey.php?survey_id=1100&mode=7&load_mode=0 (and, can you tell it's hot today? ;)

Answered by Sarah PawlekBookmark and Share

Other Answers / Comments (6)

  1. When I apply the "display:inline; position:relative;" it impacts all the questions in the survey, not just the radio buttons. How do we apply it only to questions using radio buttons?
    by Amy on Mar 21, 2013.
  2. Hi Amy!
    I just saw your comment in the FAQs.
    If possible, could you send us the URL to your form? I think it *might* be possible to manipulate this by field IDs - but I need to see the individual form code to test it.
    Please specify as well which fields you want to have appearing horizontally.
    by Valentina Mayz on Mar 22, 2013.
  3. Hi Valentina,

    It's at this URL but it's restricted to certain IPs. http://noodletools.libguides.com/aecontent.php?pid=383786 I'm copying Laura Harris who does have access. Below is a screenshot in the meantime.

    I wanted only the radio boxes horizontal. After I applied it to this column, I might decide to keep it vertical, but I like to know how to make it horizontal should I change my mind. -Thanks! Amy
    by Amy Rogers on Mar 22, 2013.
  4. Thanks Amy!
    Ok, fortunately, my theory was correct. It does require a bit of familiarity with reading the HTML in a page source.
    You can modify the code my colleague gave you earlier as follows:
    .survey_display #question_41166 .question_selection { padding-top: 5px; padding-bottom: 5px; padding-left: 22px; display:inline; position:relative;}

    Where the above number corresponds to the individual question whose radio buttons you want to display horizontally.
    To do this, you will need to know how to find the question's ID. In simplest terms, you can Vie Page Source from the browser's option > Control+F > type in the text of the question at hand > scan to the highlighted results in the source code, that would say something like this:


    You'll basically note the unique number there and insert it in the custom CSS code of the form. For every field in your form that you would want to manipulate this way, you would add the exact same code but changing the ID of the question.

    I hope this makes sense!

    Best,
    Valentina
    by Valentina Mayz on Mar 22, 2013.
  5. I tried to add both this code (from the first suggestion) display:inline; position:relative; and the question specific code from Valentina's suggestion, and it didn't work for me. I wasn't able to get my form to mimic the behavior of the example (http://springylib.campusguides.com/survey.php?survey_id=1100&mode=7&load_mode=0)

    Any suggestions?
    by Amanda Strauss on Jun 05, 2013.
  6. Hi Amanda,
    Hmm, I'd like to take a look at the survey you're working on to see if I can identify the cause and provide other suggestions to make it work.
    Could you send the URL and any other details that would be helpful for troubleshooting?
    Thanks!
    by Valentina Mayz on Jun 05, 2013.

Need Help?

This site contains FAQs for LibGuides v1 only.

LibGuides v2 Documentation
(You must have a LibApps account to access that site.)

Or click HELP in the orange command bar of your v2 system.

Support:

Follow LibGuidesFAQ on Twitter Follow us on Twitter!
 Your questions, answered!

Browse by Popular Topics

Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
View All Topics

Related content from Springshare v1 Help