[Resolved] LearnDash/Elementor multilple answer quiz CSS

Home Forums Support LearnDash/Elementor multilple answer quiz CSS

This topic contains 11 replies, has 2 voices, and was last updated by  David 2 months, 2 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1192200

    Hugo

    Hi,

    I’m using LearnDash and Elementor and I have a problem with the way answers for multiple-answer quiz are displayed: the checkboxes are so small that users can’t see which ones are selected.

    Example

    I’ve had this issue since I updated LearnDash but after some testing, it turns out it’s a theme conflict.

    Any ideas on how I could fix it?

    Thanks!
    Hugo

    #1192233

    David Customer Support

    Hi there,

    GP doesn’t actually apply any styling to an input checkbox – you could try this CSS to increase their size:

    input[type='checkbox'] {
        font-size: 2em;
        transform: scale(2);
    }
    #1192575

    Hugo

    Thanks for your reply David.

    I tried the code but I couldn’t see any change so I increased the scale to 5 and here’s what I got. It looks like every checkbox has a different styling.

    When the quiz is displayed in a single column, everything’s fine though.

    I don’t have this problem with Twenty Twenty so it must come from GP.

    #1192663

    David Customer Support

    Would you be able to switch to Twenty Seventeen so i can see what it is doing differently ?

    #1192689

    Hugo

    I checked and there’s the same problem with Twenty Seventeen.

    #1192694

    David Customer Support

    Ok so Twenty Twenty is doing something – could you switch to Twenty Twenty and let me take a look ?

    #1192695

    Hugo

    Sure!
    It’s done.

    #1192701

    David Customer Support

    OK – so Twenty Twenty is actually placing its own very specific styling over the default browser inputs.
    The fact that its also broken on Twenty Seventeen says that LearnDash should address the issue, but in the meantime if you switch back to GP i’ll see if we can come up with a fix 🙂

    #1192706

    Hugo

    Ok, I’ll let them know. But they aren’t as reactive as you guys (unfortunately). Anyway, I switched back to GP.

    #1192738

    David Customer Support

    Try this CSS:

    input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        min-width: 24px;
        height: 24px;
        background: #fff;
        border-radius: 0;
        border-style: solid;
        border-width: 0.1rem;
        border-color: #dcd7ca;
        cursor: pointer;
    }
    
    input[type="checkbox"]:checked::before {
        content: '\2713';
        position: absolute;
        display: inline-block;
        font-size: 24px;
        line-height: 1;
    }
    #1193004

    Hugo

    Perfect!

    Thanks for your help, David!

    #1193009

    David Customer Support

    Awesome – glad to be of help

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.