Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Position Radio Buttons

  • lglobig
  • lglobig's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 9 months ago - 4 years 9 months ago #186400 by lglobig
Position Radio Buttons was created by lglobig
Hi there

I am fairly new to lime survey and have been looking through the forum but have been unable to find an answer that works.
I want to position the radio buttons (see image) to the right, so that they are displayed underneath the 5 boxes displayed on the right, rather than on the left. I have been using several alterations of this code by varying the margin in template editor, but without any luck.

.list-radio div.answers table {
margin: 0;
width: 100%;
}



I would be really grateful for any help on this.

Thanks!

Laura
Attachments:
Last edit: 4 years 9 months ago by lglobig.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago - 4 years 9 months ago #186402 by Joffm
Replied by Joffm on topic Position Radio Buttons
Hi, Laura,
and your LimeSurvey version is...?

You talk about the "template editor". So I suppose your version is not 3.x.

In 3.x it was renamed to "theme editor".

In 3.x. and these settings:
<div style="float:right"><img alt="" src=" www.myServer.de/myFolder/Boot004_klein.jpg " />


<style type="text/css">
.ls-answers {
text-align: right;
}
</style>

you get this


Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 9 months ago by Joffm.
The following user(s) said Thank You: lglobig
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #186403 by tpartner
Replied by tpartner on topic Position Radio Buttons
It looks to me like you are trying to align them under an image that overflows the question container.

I think you will need to:

1) Limit the width of the image to 100%.

2) Position the answer elements absolutely relative to the image segments.

3) Define widths for the answer elements relative to the image segments.

I cannot provide any more details without knowing what the LimeSurvey version is and having access to the image.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
4 years 9 months ago #186407 by jelo
Replied by jelo on topic Position Radio Buttons
Wouldn't it be better to cut the image into five elements and place them in the answeritem? If the screen estate is limited the alignment of one big image might looks confusing.
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago - 4 years 9 months ago #186413 by Joffm
Replied by Joffm on topic Position Radio Buttons
Oh, I didn't realize that the 5 answer options correspondent to the five parts of the image. (I am getting too old)

Couldn't you do it like this?



With question theme "image-select".

But of course, it depends on your version.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 9 months ago by Joffm.
The following user(s) said Thank You: lglobig
The topic has been locked.
More
4 years 9 months ago #186415 by jelo
Replied by jelo on topic Position Radio Buttons

Joffm wrote: Oh, I didn't realize that the 5 answer options correspondent to the five parts of the image.

I'm not sure, but to me this looks like quiz. My answer to the unknown question would be 1 ;-)
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
  • lglobig
  • lglobig's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 9 months ago #186432 by lglobig
Replied by lglobig on topic Position Radio Buttons
Hi Joffm

Apologies, I forgot to mention I am using Version 3.14.3.

Thanks I will try this!
The topic has been locked.
  • lglobig
  • lglobig's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 9 months ago #186433 by lglobig
Replied by lglobig on topic Position Radio Buttons
The issue is that I want the two squares on the left and the the 5 squares on the right to all be aligned and there are a varying number of squares on the left, so sometimes there are 5 squares on the left plus 5 squares on the right (this makes the splitting up an issue I think). If I cannot get it to work otherwise I will definitely implement it this way. Thank you!
The topic has been locked.
  • lglobig
  • lglobig's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 9 months ago #186434 by lglobig
Replied by lglobig on topic Position Radio Buttons
Apologies I should have mentioned that I have already sorted the container size image. But I am struggling to position the answer elements relative to the image segments. Would that require me to split up the image? I am using LimeSurvey version 3.14.3.
A sample image is attached.

Thanks for your help!
The topic has been locked.
  • lglobig
  • lglobig's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 9 months ago #186435 by lglobig
Replied by lglobig on topic Position Radio Buttons
So just the second part
<style type="text/css">
.ls-answers {
text-align: right;
}
</style>

and then this change in the theme editor to 6.5
.radio-list li
{
display: block;
clear: both;
margin-right: 6.5rem;
}

Is kind of working. It's not ideal but such an improvement. Thanks so much!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago - 4 years 9 months ago #186459 by tpartner
Replied by tpartner on topic Position Radio Buttons
If you want to position the radio absolutely relative to the image width, you could add something like this to the question source.

But, as Jelo points out, it will fall apart on smaller screens like phones as there simply is not enough horizontal room. You could use a different image and CSS media queries for that.

Code:
<style type="text/css">
  #question{QID} .ls-answers {
    margin: 0 0 10px 0;
  }
 
  #question{QID} .ls-answers > ul {
    display:block;
  }
 
  #question{QID} .answer-item {
    display:  block;
    position: absolute;
    width: auto;
    margin: -15px 0 0 -2%;
    left: 54.5%; 
  }
 
  #question{QID} .answer-item:nth-child(2) { left: 64.95%; }
  #question{QID} .answer-item:nth-child(3) { left: 75.4%; }
  #question{QID} .answer-item:nth-child(4) { left: 85.85%; }
  #question{QID} .answer-item:nth-child(5) { left: 96.3%; }
</style>



Sample survey attached:

File Attachment:

File Name: limesurvey...7-11.lss
File Size:32 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 9 months ago by tpartner.
The following user(s) said Thank You: lglobig
The topic has been locked.
  • lglobig
  • lglobig's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 9 months ago #186511 by lglobig
Replied by lglobig on topic Position Radio Buttons
This is exactly what I was looking for! Thanks so much! Much appreciated!
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source