Okay
  Public Ticket #1849012
Formating columns; e.g.: center dates
Closed

Comments

  • RKemp started the conversation

    Hi there,

    I'm really exhausted trying to find the clue to center each item of the header, to center dates in columns or to center prizes in columns. Even costum css doesn't work.

    The position of data within each column (and the header) is essential for the appearance of a table. Therefore it should be easy to achive.

    Thank you for your help.

    Best regards

    Ralf Kemp

    P.S.: The input data source is a google spreadsheet. 

    See: https://haus-suedstrand.de/saisonpreise/... (table at the bottom of the page)

    I've found a (small) solution but still cannot format a column directly.

    Custom CSS:

    /* Für Tabellenüberschriften (header) */
    .wpDataTablesWrapper table.wpDataTable thead tr th {
        text-align: center !important;
    }

    /* Für Tabelleninhalte (content) */
    .wpDataTablesWrapper table.wpDataTable tr td {
        text-align: center !important;
    }

    But I've 2 tables on this page and certainly both are influenced. 

    How can I center the content of a certain column? 

    Sounds easy but for me unsolvable...

    Thank you very much for your help in advance.

    With best regards,

    Ralf

  •  2,572
    Aleksandar replied

    Hello Ralf.

    Thank You for Your purchase.

    I am sorry to disappoint You, but unfortunately, the way You have it configured is the only way You can configure it for now (custom CSS).

    To change a certain column, You'd have to find it's td. Something like this:

    .wpdt-c td.column-gstekategorie {
        text-align: left !important;
    }
    .wpdt-c td.column-kurabgabe {
        text-align: right !important;
    }
    

    The final result would look like in the attachment.

    You'd still need to change the header alignment, like You already did.

    Please let me know if this works for You.

    Best regards.

    Kind Regards, 

    Aleksandar Vuković
    [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

  • RKemp replied

    Hallo Aleksandar,

    thank you for your answer. With your help I can now align the headers of each column as wanted. Great! 

    Although you have to consider, that this coding is not an appropriate comfortable way of formating an table. This belong to the basic functions and ought to be delivered without coding. (I'm just a lawyer without too much time and knowlegde, smile). The alignments should be as easiely achieved as the color or the background of columns or headers of columns.

    Unfortunately, the code given for the columns (the content) does not work.

    With the help of google's developer-tools I've tried several "codes" without the desired effect.

    For the moment I cannot even configure one of the two tables of the pages due to an error message

    Error thrown

    Call to a member function setFilterType() on boolean

    Thank you for your help, Aleksandar.

    Best regard,

    Ralf

  •  2,572
    Aleksandar replied

    Hello Ralf.

    This error refers when there are some changes in the file from which table is created.

    Can You please tell me if You changed something directly in the database? Column name, type, content, did You add something? Whatever comes to mind.

    Custom CSS wouldn't be considered a change in the database, though.

    As for adding the alignment options to the plugin - we carefully follow customers requirements and try to implement most of them if they appear in requests from time to time, so we will add to our idea list and look into some possible solutions on plugin side in the future.

    Best regards.

    Kind Regards, 

    Aleksandar Vuković
    [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

  • RKemp replied

    Hello Alexsandar,

    thank you for your reply. 

    1. The problem with the error message is solved.

    2. I can also change now the alignment of a (certain) column header from center to left with: 

    /* Header  Gastkategorie */
    .wdtheader.sort.sorting_disabled.column-gastkategorie {
        text-align: left !important;

    3. But I still cannot align the content of a special column !!!

    The code 

    .wpdt-c td.column-gastkategorie {
        text-align: left !important;
    }

    or

    .td.column-gastkategorie {
        text-align: left !important;
    }

    or 

    .td.gastkategorie_spalte.column-gastkategorie {
        text-align: left !important;
    }

    ......

    does not work, unfortunately.

    I would be very grateful if you could help me to find a solution.

    Best regards, 

    Ralf

  •  2,572
    Aleksandar replied

    Hello again Ralf.

    I saw that there are three !important statements that cannot be overridden if You add left !important. Please take a look at the attachment. You'd need to disable the tablewrapper text-align, and align each column individually.

    Please let me know if You got it to work.

    If not, could You please provide me a temporary WP-admin login for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course we do not provide login data to third party. You can write credentials here just check Private Reply so nobody can see them except us.

    Best regards.

    Kind Regards, 

    Aleksandar Vuković
    [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

  •   RKemp replied privately
  •  2,572
    Aleksandar replied

    Hey Ralf.

    If I understood You correctly You'd like this to be achieved:

    1 - You'd like all column headers to be centered, correct? If so, the code is:

    /* Für Tabellenüberschriften */
    .wpDataTablesWrapper table.wpDataTable thead tr th {
        text-align: center !important;
    }
    

    2 - For "Gastkategorie" column, You want the rows to be aligned to the left:

    /*Tabelleninhalt  Gastkategorie */
    .wpdt-c td.column-gastkategorie {
        text-align: left !important;
    }
    

    3 - For "Kurabgabe" column, You want the rows to be centered:

    /*Tabelleninhalt  Kurabgabe */
    .wpdt-c td.column-kurabgabe {
        text-align: center !important;
    }
    

    4 - For "Saisonzeiten" column, the rows should be centered:

    /*Tabelleninhalt  Saisonzeiten */
    .wpdt-c td.column-saisonzeiten {
        text-align: center !important;
    }
    

    5 - For "vom" column, rows centered:

    /*Tabelleninhalt  vom */
    .wpdt-c td.tblSP_vom.column-von {
        text-align: center !important;
    }
    

    6 - For "bis" column, rows centered:

    /*Tabelleninhalt  bis */
    .wpdt-c td.column-bis {
        text-align: center !important;
    }
    

    7 - For "EG 1. Tag" column, rows centered:

    /*Tabelleninhalt  EG 1. Tag */
    .wpdt-c td.column-eg-1-tag {
        text-align: center !important;
    }
    

    8 - For "EG ab 2. Tag" column, rows centered:

    /*Tabelleninhalt  EG ab 2. Tag */
    .wpdt-c td.column-eg-ab-2-tag {
        text-align: center !important;
    }
    

    9 - For "OG 1. Tag" column, rows centered:

    /*Tabelleninhalt  OG 1. Tag */
    .wpdt-c td.column-og-1-tag {
        text-align: center !important;
    }
    

    10 - For "OG ab 2. Tag" column, rows centered:

    /*Tabelleninhalt  OG ab 2. Tag */
    .wpdt-c td.numdata.integer.tblSP_OG2.column-og-ab-2-tag {
        text-align: center !important;
    }
    

    It's all in there, in the Custom JS and CSS field under main Settings of wpDataTables, I just broke it in here like this in case You want to change settings for a certain column. For example - I wasn't sure if You'd like the "Gastkategorie" column's header to be centered or not, but I believe I got it right.

    Please check this and let me know if this is what You were looking for.

    Best regards.

    Kind Regards, 

    Aleksandar Vuković
    [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

  • RKemp replied

    Hello Aleksandar,

    perfect ...! 

    Great job, you've solved my problem even with code-commentation in german ! 

    I 'm still not quite sure  why I did not succeed... (how can I find the ".wpdt-c" part?)

    And, I wonder why it was possible to "overwride"  the (general) code for the headline but not the 

    column content. 

    Nevertheless, I've learned it now, thank you. 

    So again thanks a lot and

    best regards,

    Ralf

  •  2,572
    Aleksandar replied

    Hello Ralf.

    Thank You for Your kind words. My German is quite basic and a bit rusty, but since You already had Tabellenüberschriften in the description I guessed that for content it had to be "inhalt", and Google Translate confirmed my suspicion. :-)

    When You inspect the page, .wpdt-c is just a selector that encloses the entire table. Everything regarding wpDataTables is inside this selector, and it can be found in the beginning of the element when You inspect the page, above that "ugly blue line of code" (see attachment).

    When You add it before any custom CSS it applies to the whole table no matter of the position. We know this because we use it on daily basis.

    Please feel free to reach out to us if You have any more questions or issues.

    We'd greatly appreciate it if you could take a minute and leave a Review on CodeCanyon on this link. Thanks! 

    Best regards.

    Kind Regards, 

    Aleksandar Vuković
    [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