How to avoid long answers going below checkbox/radio-botton?

  • Resolved neondlight

    (@neondlight)


    5 years, 2 months ago

    Hi,

    Thank you for your work on this quiz module!

    If the answer is longer than the element containing a quiz, the whole answer goes below checkbox/radio-button (cf. e.g. question 4 with several long answers on the linked page).

    As far as I can see, it should be done by removing ‘display’ directive from this place:

    
.quiz-form label {
    display: inline-block !important;
    max-width: calc(100% - 2.25em);
    vertical-align: text-top;
}

    but I can’t find a way to override it.

    Even then the result is not optimal, since the answer gets wrapped around radio-button.

    Do you have any suggestions how this problem should be resolved?

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Bob

    (@prasunsen)

    I am looking at your page and don’t see such problem. Have you changed the CSS?

    Thread Starter neondlight

    (@neondlight)

    I changed just weight of the font.

    Please take a look: https://drive.google.com/open?id=14ZSs6oYd5JWki2wVZvdIYDS_Me61nHUr

    The first answer is longer than container, and it went below radio-button.

    Plugin Author wakeop

    (@wakeop)

    This .quiz-form label code is intended to create a block view of inline elements. Because the font size in your theme is in pixels (at 14px base in body), there may be a conflict between the theme’s css and the plugin’s css. Then the checkbox / radio button distance may be greater than 2.25em.
    Try to increase this value or put the appropriate value in pixels.

    For example, in Additional CSS you could put the following code:

    .quiz-form label {
???? max-width: calc (100% - 31px)! important;
}

    Start from this value and increase until it stops moving.

    Thread Starter neondlight

    (@neondlight)

    It appears that it works as intended if font size is above certain point, no matter in what units (>=16px or >=11.9pt work).

    If font is smaller than that, the suggested code doesn’t have any effect — take a look at the linked page, with (100% – 50px).

    Thread Starter neondlight

    (@neondlight)

    … update: the problem was a space after ‘calc’. Without that space, new max-width is respected, and the problem is solved. Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to avoid long answers going below checkbox/radio-botton?’ is closed to new replies.