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

More
3 years 8 months ago #104636 by elementb
elementb created the topic: List-Radio: Ugly Line Breaks, when having short labels
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

Please Log in to join the conversation.

More
3 years 8 months ago #104644 by DenisChenu
DenisChenu replied the topic: List-Radio: Ugly Line Breaks, when having short labels
Hi,

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

Denis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
3 years 8 months ago #104654 by elementb
elementb replied the topic: List-Radio: Ugly Line Breaks, when having short labels
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?

Please Log in to join the conversation.

More
3 years 8 months ago #104669 by tpartner
tpartner replied the topic: List-Radio: Ugly Line Breaks, when having short labels
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.

Please Log in to join the conversation.

More
3 years 8 months ago #104670 by elementb
elementb replied the topic: List-Radio: Ugly Line Breaks, when having short labels
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

Please Log in to join the conversation.

More
3 years 8 months ago - 3 years 8 months ago #104675 by tpartner
tpartner replied the topic: List-Radio: Ugly Line Breaks, when having short labels
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: 3 years 8 months ago by tpartner.

Please Log in to join the conversation.

More
3 years 8 months ago #104677 by elementb
elementb replied the topic: List-Radio: Ugly Line Breaks, when having short labels
unfortunately I have to stick on this template...

but your css-code worked perfekt!

Thank you!

Please Log in to join the conversation.

More
3 years 8 months ago #104682 by DenisChenu
DenisChenu replied the topic: List-Radio: Ugly Line Breaks, when having short labels

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 development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
3 years 8 months ago #104686 by tpartner
tpartner replied the topic: List-Radio: Ugly Line Breaks, when having short labels
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 following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

More
3 years 8 months ago #104688 by DenisChenu
DenisChenu replied the topic: List-Radio: Ugly Line Breaks, when having short labels

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 development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
3 years 8 months ago #104693 by tpartner
tpartner replied the topic: List-Radio: Ugly Line Breaks, when having short labels
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.

Please Log in to join the conversation.

More
3 years 8 months ago - 3 years 8 months ago #104695 by DenisChenu
DenisChenu replied the topic: List-Radio: Ugly Line Breaks, when having short labels

tpartner wrote: test in IE7+.


Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 3 years 8 months ago by DenisChenu.

Please Log in to join the conversation.

More
3 years 8 months ago #104699 by tpartner
tpartner replied the topic: List-Radio: Ugly Line Breaks, when having short labels
:laugh:


.

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

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now