[Resolved] target view in css

[Author]

Posts

[davidm-13]

Hi, I have the following View in my webpage:
<div id="complnt" class="complaints" style="position: relative; left: -2vw; padding-top: 12vh">
[wpv-view name="complaints-list-new-table"]
</div>
In the View I have:
<div class="comp-tbl">
<table id="complaintLst">

I want to print (@media print {...}) this table. How would I target it in the css?

Any help much appreciated

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Can you please share the link to a page where this table can be seen?

I'll be in a better position to suggest the CSS code suggestion, accordingly.

regards,
Waqar

[davidm-13]

Hi Waqar,
The page is: hidden link
There's actually 2 tables I need to print (@media print):

1. [wpv-view name="complaints-list-new-table"] in Content Tempplate Template for single plants - Grid -v4

2. [wpv-view name="other-uses-table"] in View complaints-list-new-table

Thanks very much for your help

[Waqar]

Thank you for sharing these details.

I tested print CSS styles, but some other styles loaded on the website seem to be overwriting them.

For further troubleshooting, can you please share temporary admin login details, in reply to this message? I'll also need your permission to download a clone/snapshot of the website, in case it needs to be investigated on a different server.

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

[Waqar]

Thank you for sharing these details.

During troubleshooting, I noticed that the custom CSS styles added in the CSS editor of the content template 'Template for single plants - Grid -v4' are responsible for tables not showing correctly in the print layout.

If all those custom CSS styles are removed and only the following print CSS styles are included, the tables start showing correctly in the print layout:

@media print {
  table,
  thead,
  tbody,
  tr th,
  tr td {
    max-height: none !important;
    height: auto !important;
    max-width: none !important;
    width: auto !important;
  }
}

Note: There is a long list of existing custom CSS styles in that template and it won't be possible for us to investigate all of them. But, you can remove them and add them in smaller chunks, so that only the necessary styles are included and the conflicting one can be narrowed down.