Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: List-Radio: Ugly Line Breaks, when having short labels

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104636

  • elementb
  • elementb's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
Hey folks,

I couldn't figure out, how to repair the following issue:

Now

Question: Select a Category

*
Flight

*
Hotel

*
Car


Should be:

* Flight
* Hotel
* Car

Does anybody know how to prevent the line breaks?

Thank you for any hint!

Sabine
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104644

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9290
  • Thank you received: 1325
  • Karma: 384
Hi,

Did you have <p> or <br> in you answre text ?
Else : what is your template ?

Denis
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104654

  • elementb
  • elementb's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
Hi Denis,

thank you for your help.

I have no <br> and <p> tags used in my answer texts.

The problem with the line break only shows up, when the texts are very short ... don't know why.

I use the template "blue'n grey"

I did some modifications, but when i use the original 'bluengrey'-template there ist the same error, so I think its not because of my modifications.


Any idea?
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104669

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1361
  • Karma: 535
Please activate a test survey for us to see.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104670

  • elementb
  • elementb's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
here is how it looks:

www.orpheus-it.com/survey/index.php?sid=23578&newtest=Y&lang=de

the labels should be on the left side of the radio ...

when I use labels with more characters it works .. but there must be a bug or something
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104675

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1361
  • Karma: 535
Well, personally I don't think "blue'n grey" is the best template, maybe you could try a variation on Denis' "citronade".

If you need to use "blue'n grey", try adding this to the end of template.css

div.answers table {
    min-width: 20%;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 2 years 5 months ago by tpartner.
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104677

  • elementb
  • elementb's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
unfortunately I have to stick on this template...

but your css-code worked perfekt!

Thank you!
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104682

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9290
  • Thank you received: 1325
  • Karma: 384
tpartner wrote:
If you need to use "blue'n grey", try adding this to the end of template.css

div.answers table {
    min-width: 20%;
}
Hi Tony,

I don't really understand why it's needed here ? Citronade force at 100% but i think default no (leave width:auto).
Why it's broken in bluengray ? Any idea ? (It's just for CSS competence ;) ).

Denis
PS: @elementb what is this LS version ?
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104686

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1361
  • Karma: 535
It's because the only thing that has a defined width is the <label> element, which is set at 85%.

This means that, if for example, your maximum label width is only 30px, the <li> will be ~35px and since the radio input is ~13px, a wrap is forced.

Setting the table min-width simply increases the min-width if the <li> element (since it will grow to 100% of its parent).


.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: DenisChenu

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104688

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9290
  • Thank you received: 1325
  • Karma: 384
tpartner wrote:
It's because the only thing that has a defined width is the <label> element, which is set at 85%.

This means that, if for example, your maximum label width is only 30px, the <li> will be ~35px and since the radio input is ~13px, a wrap is forced.

Setting the table min-width simply increases the min-width if the <li> element (since it will grow to 100% of its parent).


.
You're rigth,

Then alternative solution and fix can be:
.list-radio .answers li label, .list-with-comment .answers li label {
    width: auto;
}
tested with firebug.

Denis
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104693

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1361
  • Karma: 535
Yes, that probably makes more sense but I would want to test in IE7+. (I suspect the 85% was stuck in there for old IE).


.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104695

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9290
  • Thank you received: 1325
  • Karma: 384
tpartner wrote:
test in IE7+.
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
Last Edit: 2 years 5 months ago by DenisChenu.
The administrator has disabled public write access.

List-Radio: Ugly Line Breaks, when having short labels 2 years 5 months ago #104699

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 6132
  • Thank you received: 1361
  • Karma: 535
:laugh:


.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 1.379 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form