Okay
  Public Ticket #1875655
Spreadsheet formatting completely removed
Closed

Comments

  • Omar started the conversation

    I managed to get this Google Sheet imported, but the formatting is completely removed.

    How do I get my formatting back?

  •  2,572
    Aleksandar replied

    Hello redrazormedia.

    When you import data from another source, none of the formatting from that source is being kept. Like described in our documentation:

    Please don’t apply any formatting in this new sheet. You can make whatever adjustment you may need in WpDataTables.

    Also, please note: Once you create a table from a Google Spreadsheet, changes in the core file from which a table is created, like:

    • Changing the column’s name,
    • Changing the column’s order,
    • Deleting the column, and
    • Adding a new column.

    are highly not recommended, because the old table will not work, at the moment. If you make any of these changes, please recreate the table again.

    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

  • Omar replied

    You say that I can format my table to look like the original spreadsheet, but you do not specify how.

    The documentation is not clear to me.

    The text in the first column of this spreadsheet: https://is.gd/LqWXSX needs to look like that on the wpdatatable as well.

    Please, tell me specifically how to do this.

    Key points:

    The column wraps text expanding vertically when necessary to accommodate the amount of text being displayed.

    1. The "Heading" lines are a different font size and color.

    2. The "Description" lines are a different font size and color

    3. The "Location" lines are a different font size and color

    4. The columns that display images are inserting a box with ellipses when the input data provided does not produce an image string. I would prefer these to be either completely blank or display a character of my choice under these conditions.

    5. I don't want alternating row colors like white and grey. I want every row to have a either a transparent background or a white background.

    6. I don't want to see any headings.

    Here's a link to what shows up in the wpdatatable: https://artisan-c7263.easywp.com/menus/

    (The actual spreadsheet data used to populate is a copy of the original with the formatting removed on Google Sheets, since it doesn't carry over, but I want it to look like the spreadsheet example here: https://is.gd/LqWXSX)

  •  2,572
    Aleksandar replied

    Hello again redrazormedia.

    wpDataTables uses existing sources like Excel, CSV, SQL and Google Spreadsheet files either as read-only, or (if you're importing those sources) an edit tool which cannot change the source file, and is only able to copy content. It is not an ultimate tool that can copy font families, font color, font size, formatting in all; it doesn't use the same logic and formulas like all these external sources. For example - Google Sheet formulas are different from Excel, and vice versa. Same goes for wpDataTables.

    So, what you're trying to achieve is possible, but with a little work.

    I created a wpDataTables table, and set up the first 10 rows to look like they do in Google Spreadsheet; please see attachment "Selection_183".

    In order to do that, I added Conditional formatting for the first column (see attachment "Selection _184") where I defined a CSS class for the first row (big font, green letters), second row (bold text) and third row (gray letters). All these rules are simply content of cells from Column "dish". Please compare these two attachments to see what I'm talking about.

    Custom CSS classes look like this in Custom JS and CSS tab, under main Settings of wpDataTables:

    .wpdt-c .firstrow {
    color: green;
    font-size: 20px;
    }
    .wpdt-c .secondrow {
    font-weight: bold;
    }
    .wpdt-c .thirdrow {
    color: gray;
    }
    

    Of course, you can add font-family, change font size, whatever you'd like to do there.

    In order for front-end users not to be able to sort by these columns, you can click on the yellow column list, and un-select the AZ button:

    6115105553.png

    In order to be able to change the width of the columns, you need to enable "Limit table width" and "Word wrap" sliders, found under "Display" in the table configuration (see attachment "Selection_186").

    Then, you can define each column's width by opening its settings:

    8684525621.png
    9153239459.png

    To add images to columns, please use this code in the edit modal:

    <img src="https://artisan-c7263.easywp.com/wp-content/uploads/2019/01/menu-item-type-lipork.png" height="20" width="20">
    

    So, it looks something like this:

    5629596104.png

    Also, to have only white background for the table, please add this to Custom JS and CSS tab, under main Settings of wpDataTables:

    .wpDataTablesWrapper table.wpDataTable tr.odd td {
    background-color: white !important;
    }

    As for removing the headers from the table, please use this:

    <style>
    .wpdt-c thead {
    display: none !important;
    }
    </style>
    

    This code is between <style>...</style> tags, because all this custom CSS that you enter in Custom JS and CSS apply to all tables, both in back-end and in front-end. So if you want to apply this, or any other CSS mentioned above, only to one table, you need to insert the code with <style> tags when creating the page where the table is being displayed, before the shortcode.

    If you want to remove all headers from all tables, then of course, you can add it to Custom JS and CSS.

    Please feel free to explore our documentation; there is a lot of useful advice there.

    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

  • Omar replied

    Thanks for the information. It has been helpful.

    I have a few more questions.

    1. For some reason I can't get the column widths for the columns to render correctly. See the attached image.

    As you can see, the first column is just as thin as the other columns even though I specify it to be 200px wide while the rest are supposed to be 17 px wide. The text wrap is working, but this doesn't look like it's supposed to.

    2. I asked how to get rid of the image blanks. See attachment called "Image Errors."

    I know why there is an error, but I don't want there to be anything visible when there is an error. I don't want the placeholder images to display.

    This is what is being entered into the cells in question: <img src="" alt="...">

    That code is why there is no image to be found. How would I tell wpdatatables to display nothing when that it found in a cell?

    3. I found something that may be helpful with formatting every 1st, 2nd, and 3rd row differently.

    Previously, you suggested that the way to have different formatting for each row was to manually create conditional rules for each row. However, I found aselector that may make that easier. The issue is I don't know how to implement it correctly to work with wpdatatables.

    The selector,  :nth-child(), can be found here: https://www.w3schools.com/cssref/sel_nth-child.asp

    Do you have any insight how I would use this in conjunction with the CSS code you previously sent to format the 3 rows differently?

    Here's what you sent before:

    .wpdt-c .firstrow {
    color: green;
    font-size: 20px;
    }
    .wpdt-c .secondrow {
    font-weight: bold;
    }
    .wpdt-c .thirdrow {
    color: gray;
    }

    Again. Thanks for your help.



  • Omar replied

    Forgot the second attachment from my last reply.

  •  2,572
    Aleksandar replied

    Hello again redrazormedia.

    Sorry for late response. 

    Our company is located in Serbia and our working time is from 10:00 to 17:00 CET. business days.

    Can 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

  •   Omar replied privately
  •  2,572
    Aleksandar replied

    Alright redrazormedia.

    I got in and saw the issue.

    1. wpDataTables is a WYSIWYG (What You See Is What You Get) concept based plugin. This means that the table should look the same both in back-end and in front-end. If your front-end table looks and behaves differently than in back-end, this usually implies that there is another plugin (or the current theme) that's changing the behavior of our plugin.

    In this case, I believe it is the custom page element created by the Cornerstone page creator. 

    Unfortunately the issues like conflicts with third party plugins or themes are always possible due to the nature of WP.

    2. I believe you can add conditional formatting for the columns to hide "empty" cells, or broken images. So, if the cell content is always "<img src..." for those broken images, you'd add conditional rule for that column, something like this:

    If cell value contains <img set cell content _______

    So, if you leave the last field blank, it should replace all instances of <img with an empty cell. Please try something like this, but also inspect the source file to find the correct cell content.

    3. Unfortunately, we're not familiar with this workaround, and are not sure if it'd work with our plugin. You're certainly welcome to try, and explore more options online, but since this would require writing custom code, unfortunately that doesn't fall under support of the plugin.

    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

  • Omar replied

    1. you have access to my site and the instance of wpdatatables on the site, please add the correct conditional formatting to the a6 colum of  my table so that I can see how to correctly create the conditional formatting to get rid of the blank images w hen the cell input is exactly "<img src="" alt="...">"2. 

    The back-end rendering of the table in configuration mode does not display the correct word wrapping function. So, I have no way to know whether or not that is working correctly. If you are unwilling to troubleshoot whether or not the issue is the theme, then please find someone else within your organization to further investigate this issue. This is not what I consider support, if I have to do all of the work myself.

    3. in, I'm trying to see how one might implement that line  of code: :nth-child()

    If it were going to be used, where would I use it? I sent a link so you could familiarize yourself. I'm just looking for advice on how I might use it to simplify my formatting of the rows. It seems it would be to your benefit and the the companies benefit to figure that out as many users might find it useful.

  •  2,572
    Aleksandar replied

    Hi redrazormedia.

    If you are unwilling to troubleshoot whether or not the issue is the theme, then please find someone else within your organization to further investigate this issue. This is not what I consider support, if I have to do all of the work myself.

    Please check CodeCanyon's defintion of support: https://codecanyon.net/page/item_support_policy

    We did provide you with answers on how to use the item and did give you some technical guidance on functionality.

    However, preparing custom code, queries and tables for you is falling under "Item customization" which as you can see by the support policy isn't covered by the support included with item price. We can help you with that of course but would have to charge our hourly rate for customization services as with all clients.

    Thank you for understanding.

    1. Please allow access to the Google Spreadsheet from which the table was created, so I can find the proper rule (see attachment).

    As the column width, we'll look into the issue and see what can be done to override "Limit table width to page width", so your columns do appear as 200 and 17px, and we'll get back to you.

    3. Implementing :nth-child() also falls under advanced customization, so again I must repeat:

    Preparing custom code, queries and tables for you is falling under "Item customization" which as you can see by the support policy isn't covered by the support included with item price.

    However, if the only thing you want to change is the color of odd (or even) rows in the table, you can change that in main settings, under Color and font settings (see attachment).

    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

  • Omar replied

    What email address would I give access to the spreadsheet? I can't make it open to the public to edit.

  • Omar replied

    I was just looking at the site and noticed that the column width issue still remains.

    I tried using the sort code outside of the theme and though it changed the behavior slightly the column width still behaves erratically.

    It seems that when I turn on "limit column width" the width I specify is not obeyed and with it off, the column with text just displays everything on a single line.

    This is in theme and out.

    Please, help me figure out what is wrong.

    Also, I need to know the email address to give access to the Google sheet.

    You can also simply request edit access from the Google sheet.

  •  2,572
    Aleksandar replied

    Hello again redrazormedia.

    Sorry for late response. 

    Our company is located in Serbia and our working time is from 10:00 to 17:00 CET. business days. Also, we were out of office for a national holiday.

    I've requested access for the Google Spreadsheet document, and in the meantime our developers will look for a workaround for the column width issue. I'll get back to you when you grant access to the file, and when I hear back from the developers on the column width.

    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

  • Omar replied

    At this point the only column width issue I'm still having is that when I go to a mobile phone browser the columns don't scale correctly.

    The rest of the formatting is the way that I would like it at this time.

  •  2,572
    Aleksandar replied

    Hello again redrazormedia.

    I think I got it. Please take a look. I inserted some CSS again:

    .wpdt-c .wpDataTablesWrapper table.wpDataTable td {
    overflow: visible !important;
    }

    So when viewed from a mobile device, the table looks like this:

    8995304609.png

    Does this solve the issue?

    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

  • Omar replied

    That is much better!

    Is there a way to maintain at least a 1-3px gap between the icons?

  •  2,572
    Aleksandar replied

    Hi again redrazormedia.

    The thing is that it'd be possible, but it'd mess up the first column. It's pulling the width of that element that you need to click on to open the breakfast and lunch menus, so its space is very limited.

    You can try playing around with column widths, padding, margins, etc. if you want, just to see how it behaves - maybe you'll find something that you like for the mobile look; but be sure to use the media queries, so the custom code applies only to a certain width.

    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

  • Omar replied

    Good morning.

    Things were fine, then the adding the shortcode started to change the color of other areas of the website unexpectedly. Even stranger, the color isn't used anywhere else on my site.

    An example is attached.

    I've checked my "Additional CSS" code and none of it calls for the color RED.

    If I remove the WPDataTables shortcode from a page the red color goes away, and I couldn't find anything in the configuration that calls for turning the background of anything RED. Furthermore the effected areas aren't even part of the WPDataTable at all. I'm at a loss for why this is happening.

  •  2,572
    Aleksandar replied

    Hello Leneia.

    When you have questions or issues which are not related to the title of the active ticket can you please open a new one, and we will help you there. In that way, issues and questions which are related to different subjects will be in different tickets so other customers or our support agents can find it easily. Our policy is to have one issue or question per ticket because of the reasons that is described already.

    Thank you for understanding.

    I logged in and checked the Custom CSS for wpDataTables, and found this:

    p:nth-child(2) {
      background: red;
    }
    

    3202338994.png

    When I removed that, the issue was gone. Please check the page and let me know if the issue is resolved.

    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

  • Omar replied

    You had me use this code:

    .wpdt-c .wpDataTablesWrapper table.wpDataTable td {
    overflow: visible !important;
    }

    to control how wide the columns are when displayed on mobile devices, but now they look cutoff again. What changed?

    Expanding any of the accordions on this page will show you what I'm talking about.

    https://artisan-c7263.easywp.com/

  •  2,572
    Aleksandar replied

    Hi again Omar.

    Is that code still present in Custom CSS field, because I did not see it loaded on the page?

    When I add it when I inspect the page, it looks like this:

    7129285444.png

    What was changed in the meantime that'd cause the plugin not to accept it?

    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