Okay
  Public Ticket #3704443
Conditional Formatting
Closed

Comments

  •  1
    Michael started the conversation

    Hi Team

    I'd like to asign a conditional formatting to a column (add column css class) if the column doesn't contain anything.

    I other words I like to hide the column if nothing is in (display: none) and show the column (display: table-cell), but I'm struggeling with the condition.

    Best Regards Michael

  •  1,846
    Miloš replied

    Hi Michael,

    If I understand the goal, you wish for the conditional rule to check, if all of the currently visible cells of a column are empty,  to hide that column in that case?

    Or, if there is at least one or more cell which is 'not empty', to then display the column?

    I believe I have a workaround for this scenario.


    In our Conditional Formatting Logic, we can add several Rules, and each "next rule" has higher priority over the previous rule.

    So, let's say if you set the first rule to check if there is any empty Column, to add a CSS class to the Column, which will do a custom CSS code to set "display" as "none" to that Column.

    But then, add another rule beneath it, that adds a new CSS class if any cell is not blank,

    and on this CSS we say set the Display of that Column to : table-cell. ( which is the original/default display property)

    I made a Test on my Table and happy to say, it seems to work exactly as intended.


    Here is my example in more details. If i add this Column, just named it "Empty Column", then I first make all cells empty to see if it hides it, and it does.

    Then, if i add just one cell with some Data, then the Column is shown.

    1414469425.png

    I did these two Rules in that Column :

    3333307823.png

    In my case, i name the one that hides "hidecustom" and the other Class that shows ( if there is any cell which is not empty)  as "showcustom".

    Then, add this CSS to the Customize/Custom CSS of the Table :

    .hidecustom {
        display : none;
    }
    .showcustom {
        display: table-cell !important;
    }
    
    8519459934.png

    ( Of course, you can rename the classes anything you wish)

    So, it works because the 'second' rule has more importance/overrides the first rule.


    The same logic applies to setting CSS lines, it is always the last line that has priority over the 'older lines above', so i think this should work for your use-case.smile.png


    Please try it if you can and let me know how it goes.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    Michael replied

    Thanks Milos!

  •   Miloš replied privately