Okay
  Public Ticket #3559393
Formatting of table
Closed

Comments

  • Ronald started the conversation

    1. 

    In my HTML page I want to hide the header  of table 19 with:

    <style>
    .wpdt-c .wpDataTablesWrapper table.[wpdatatable id=19] thead {
    display: none !important;
    }
    </style>

    It does not work. What is wrong?


    2.

     In: https://sandbox.wpdatatables.com/wp-admin/admin.php?page=wpdatatables-constructor&source&table_id=2  - Is it possible to conditional format the whole table, instead of for each month?

    Attached files:  Conditional formatting.png

  • Ronald replied

    Another  aditional question:

    How do I get 1,2,3,or 4 stars in the Average rating exemple>

    Attached files:  Aantal sterren .png

  •  1,689
    Miloš replied


    Hi Ronald,

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    1. Regarding hiding Headers :

    1. If you wish to completely hide the entire header element with CSS for one or more columns:

    Add a CSS class in the column(s) display settings, for example "hideHeader"

    3211565612.png

    Then add this CSS in Customize/Custom CSS of the table :

    th.wdtheader.hideHeader {    display : none !important;
    }

    And this will completely hide the header for all the columns that you add that class to.

    -

    2. Setting background and hover color the same to make header text "appear invisible" :

    if we try to set the background color of this header the same as the text;  technically speaking, it looks as if it's invisible, even when someone hovers over the header. 

    For example, if we use "Aqua" table skin, and if i want to do this for column "name" of my table :

    1963372352.png

    First, we add a class to the column, i name it "hideHeader"

    3211565612.png

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

    th.wdtheader.hideHeader {
        background-color: #0083c2 !important;
        color : #0083c2 !important;
    }
    3527582556.png

    And this is the result - the header text "seems invisible" even when i hover the mouse over it, the text is visually blank :

    4573476028.png


    Let me know if that works, or if you still encounter any issue.


    2. When it comes to setting the Star Rating as on the example :

    With some custom CSS, you could achieve that, just like in our catalog of books example table.

    You would need to add some conditional formatting to the "stars" column:

    4203503314.png

    Each content (<span class) has these in order:

    <span class="stars-container stars-96">★★★★★</span>
    <span class="stars-container stars-90">★★★★★</span>
    <span class="stars-container stars-85">★★★★★</span>
    <span class="stars-container stars-80">★★★★★</span>
    <span class="stars-container stars-70">★★★★★</span>
    <span class="stars-container stars-60">★★★★★</span
    

    Of course, you will set those conditions in Conditional formatting for your needs.

    And the classes are defined in wpDataTables settings/Custom JS and CSS/Custom CSS field, like:

    .stars-container{
    font-size:20px !important;
    }
    .stars-container { position: relative; display: inline-block; color: transparent; font-size: 50px;
    line-height:normal;
    }
    .stars-container::before{ position: absolute; top: 0; left: 0; content: '★★★★★'; color:lightgray;
    }
    .stars-container::after { position: absolute; top: 0; left: 0; content: '★★★★★'; color: gold; overflow: hidden;
    }
    .stars-0::after { width: 0%; }
    .stars-10::after { width: 10%; }
    .stars-20::after { width: 20%; }
    .stars-30::after { width: 30%; }
    .stars-40::after { width: 40%; }
    .stars-50::after { width: 50%; }
    .stars-60::after { width: 60%; }
    .stars-70::after { width: 70%; }
    .stars-80::after { width: 80%; }
    .stars-85::after { width: 85%; }
    .stars-90::after { width: 90%; }
    .stars-96::after { width: 96%; }
    .stars-100::after { width: 100%; }


    3. When it comes to Conditional Formatting;

    If you mean to have one Conditional Rule affect across multiple Columns/ the entire Table, as you said;

    At this time this is not possible.

    Each Condition you set will only look in the cells for that specific Column.

    We do not have a way currently to have one Condition look for cells across multiple columns - or to have the effect "if the condition is met", to have an effect from Column A to Column B, and similar situations like that.

    You can leave a development suggestion for the future.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.



    For the future, please note :

    When you have multiple questions or issues which are for different subjects/topics,

     please open a new ticket for each subject, and we will help/advise more effectively. 

    In that way, issues and questions which are related to different subjects will be in separate tickets so other users or our support agents can find them easily. 

    Our policy is to have one issue or question per ticket for the reasons described already.

    Thank you for understanding.


    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    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

  • Ronald replied

    Milos

    Thank you very much! It works fine.

    Greetings

    Ronald

  •   Miloš replied privately