Check out the LimeSurvey source code on GitHub!

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

More
3 years 1 week ago #104636 by elementb
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 1 week ago #104644 by DenisChenu
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).

Please Log in to join the conversation.

More
3 years 1 week ago #104654 by elementb
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 1 week ago #104669 by tpartner
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 1 week ago #104670 by elementb
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 1 week ago - 3 years 1 week ago #104675 by tpartner
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 1 week ago by tpartner.

Please Log in to join the conversation.

More
3 years 1 week ago #104677 by elementb
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 1 week ago #104682 by DenisChenu

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).

Please Log in to join the conversation.

More
3 years 1 week ago #104686 by tpartner
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 1 week ago #104688 by DenisChenu

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).

Please Log in to join the conversation.

More
3 years 1 week ago #104693 by tpartner
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 1 week ago - 3 years 1 week ago #104695 by DenisChenu

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).
Last Edit: 3 years 1 week ago by DenisChenu.

Please Log in to join the conversation.

More
3 years 1 week ago #104699 by tpartner
: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.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form