Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

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

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

  • elementb
  • elementb's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • 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 8 months 2 weeks ago #104644

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6429
  • Thank you received: 840
  • Karma: 249
Hi,

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

Denis
The administrator has disabled public write access.

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

  • elementb
  • elementb's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • 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 8 months 2 weeks ago #104669

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4270
  • Thank you received: 804
  • Karma: 368
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.

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

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

  • elementb
  • elementb's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • 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 8 months 2 weeks ago #104675

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4270
  • Thank you received: 804
  • Karma: 368
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 8 months 2 weeks ago by tpartner.
The administrator has disabled public write access.

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

  • elementb
  • elementb's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • 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 8 months 2 weeks ago #104682

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6429
  • Thank you received: 840
  • Karma: 249
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 ?
The administrator has disabled public write access.

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

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4270
  • Thank you received: 804
  • Karma: 368
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.

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: DenisChenu

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

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6429
  • Thank you received: 840
  • Karma: 249
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
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.194 seconds
Donation Image