Welcome, Guest
Username: Password: Remember me

TOPIC: CSS list item display - doesn't work??

CSS list item display - doesn't work?? 2 years 8 months ago #76834

  • Melarish
  • Melarish's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 15
  • Karma: 0
I'm trying to make all answer choices appear on a new line. So I added this bit to the Question Page template:

li {
display: block;
}

...but it's not working and they're still all on one line. On smaller resolutions, it doesn't fit on one line and it looks confusing.
ScreenHunter_02Mar.1901.37.jpg



In the source, the answer options appear as:
<li>
<input class="radio" type="radio"/>
<label for="answer91296X309X429PS" class="answertext">Probably Same</label>
</li>

and if I add display:block to the answertext class or label, then it puts the radio button and label on different lines -_-

I'm very inexperienced with CSS, so I'm not sure what to do. The template file is really huge too :/
The administrator has disabled public write access.

Re: CSS list item display - doesn't work?? 2 years 8 months ago #76840

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6551
  • Thank you received: 869
  • Karma: 257
Hello,

By default, with default template, each button radio are on a new line. Set "Display columns" advanced setting to 1.

:)
The administrator has disabled public write access.

Re: CSS list item display - doesn't work?? 2 years 8 months ago #76852

  • Melarish
  • Melarish's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 15
  • Karma: 0
But it's already set to 1 :unsure:

I'm not using the default template though; it's something my coworker must have found somewhere (she doesn't know CSS).

Here's a screenshot of the template if anyone recognises it:

ScreenHunter_08Mar.1910.34.jpg



Or the zip file:

File Attachment:

File Name: xxxxxx.zip
File Size: 46 KB
Last Edit: 2 years 8 months ago by Melarish.
The administrator has disabled public write access.

Re: CSS list item display - doesn't work?? 2 years 8 months ago #76856

  • c_schmitz
  • c_schmitz's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 824
  • Thank you received: 116
  • Karma: 93
Looks like the default template. Rather use that one.
Support us, too. Donate to the LimeSurvey project and help keep us going!
The administrator has disabled public write access.

Re: CSS list item display - doesn't work?? 2 years 8 months ago #76922

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4371
  • Thank you received: 829
  • Karma: 381
Yes, that template is very similar to the default template so it may be best to use that.

However, if you do need to use that template, remove lines 1202-1222 of template.css. In other words, remove this:
.list-radio ul {
margin-left:0;
margin-top:0.5em;
padding-left:0;
text-align:left;
}
 
.list-radio ul li {
display: inline;
padding: 0 2em 0 0;
margin-left: 0;
}
 
.list-radio .answer li label {
display: inline-block;
width: auto;
}
 
.list-radio td.answer {
padding-bottom:10px;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: Melarish

Re: CSS list item display - doesn't work?? 2 years 8 months ago #77046

  • Melarish
  • Melarish's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 15
  • Karma: 0
Removed that code and it still shows exactly the same :(
The administrator has disabled public write access.

Re: CSS list item display - doesn't work?? 2 years 8 months ago #77047

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4371
  • Thank you received: 829
  • Karma: 381
Did you clear your cache? Try another browser?

Can you activate a sample survey for us to see?
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: CSS list item display - doesn't work?? 2 years 8 months ago #77048

  • Melarish
  • Melarish's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 15
  • Karma: 0
Sorry; I forgot to refresh the page after going there again :blush: . Yes, it works now! Thanks so much for your help!! :cheer:
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.117 seconds
Donation Image