FORMATTING OF MULTIPLE CHOICE FIELDS WITH CONDITION

Hi

The solution I found in this topic: https://premium.wpmudev.org/forums/topic/formatting-of-multiple-choice-fields?replies=9#post-1185163, is perfect!
But I need one more thing in this css code. I need a condition.
If I have from 1 to 6 choices, I don't want the choices to split into 2 columns.
But if I have 12 choices, yes.

The solution I receive, in this same topic, is not what I want (or I didn't know how to use it with the previous code)

Please help!

Thank you in advannce for your answer

  • Jude
    • DEV MAN

    Hey Genevieve

    Hope all is well with you and you are keeping fine !

    Here is the CSS that should work in your case.

    .checkbox_answer_group:first-child:nth-last-child(6),
    .checkbox_answer_group:first-child:nth-last-child(6) ~ .checkbox_answer_group {
            display: inline-block;
    }
    
    .checkbox_answer_group li:first-child:nth-last-child(6),
    .checkbox_answer_group li:first-child:nth-last-child(6) ~ .checkbox_answer_group li {
            width: 48%;
            float: left;
        }

    Thank you for being a WPMU DEV member and have a fantastic day !

    Cheers
    Jude

  • Genevieve
    • Site Builder, Child of Zeus

    Hi!

    I'm fine thank you! hope you doing well too
    thank you for your answer but I think that I was not clear enough

    You see here, I have 11 choices, and the split is perfect.

    But here, I have 7 choices, and the split is not mandatory.

    So, for the question with 1 to 7 choices, I want to have one column.
    And for the question with 8 to 20 choices, I want to have two column as the first pictures.

    Thank you again for your help!

  • Luís
    • Support

    Hi Genevieve ,

    Hope you're doing well today!

    Firstly, sorry for the late reply and all the problems it may have caused.

    So, for the question with 1 to 7 choices, I want to have one column.
    And for the question with 8 to 20 choices, I want to have two column as the first pictures.

    To do something like this, we will need to use jQuery, I think, but firstly, the CSS code suggested by my teammate Jude is related to the old version of CoursePress, the new version (2.0 +) have different selectors.

    So, I will take the old version of Coursepress (prior to 2.0) as an example.

    1) First, using jQuery, we need to check if we have more than 7 choices:

    jQuery(document).ready(function($){
    $('.checkbox_answer_group').filter(function(){
        return this.children.length > 7
    }).addClass('twoColumns');
    });

    2) Then, if's true, we split in two columns using CSS:

    ul.twoColumns {
      list-style: none;
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }

    If you are using the CoursePress (2.0 +) we need to change the selector used in the jQuery code:

    jQuery(document).ready(function($){
    $('.module-elements ul').filter(function(){
        return this.children.length > 7
    }).addClass('twoColumns');
    });

    If you don't know, you should always avoid change the original CSS files, in order to don't lose it all when you make an update. So, we recommend use a plugin to add custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    And a plugin to add custom Javascript:

    https://wordpress.org/plugins/tc-custom-javascript/

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Luís
    • Support

    Hi Genevieve ,

    Hope you're doing well today!

    Seems that you are using the old CoursePress theme (version 1). I tested this on my install and was unable to replicate. Can you give me access to your admin panel, so I can check your issue?

    If you don't already know, please, follow the link below, to see how enable the staff login:

    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    When you enable this option, please post again!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.