Hiding Aggregate Columns (td)

[Clint]

I'm struggling getting some CSS correct in a tabular datapage and could use some help. Aggregate rows do not respond to hiding columns in the same way that data rows do when deployed. (See screenshots)

In this example, I'm trying to hide three extra cells in the aggregate row. When I preview the datapage it works. When I deploy the datapage, it does not.  Note that the first 4 sets of table selectors all work.

Here's the CSS in my header element:

<style>
<!-- WORKS: -->

#dashtable table:nth-of-type(1) td:nth-of-type(9)  {display: none;}
#dashtable table:nth-of-type(1) th:nth-of-type(9)  {display: none;}

#dashtable table:nth-of-type(1) td:nth-of-type(7)  {display: none;}
#dashtable table:nth-of-type(1) th:nth-of-type(7)  {display: none;}

#dashtable table:nth-of-type(1) td:nth-of-type(8)  {display: none;}
#dashtable table:nth-of-type(1) th:nth-of-type(8)  {display: none;}

#dashtable table:nth-of-type(1) td:nth-of-type(6)  {text-align:center;}
#dashtable table:nth-of-type(1) th:nth-of-type(6)  {text-align:center;}

<!-- PREVIEW WORKS, DOES NOT WORK WHEN DEPLOYED: -->
#dashtable .cbResultSetTotalsDataCell {display:none;}

</style> 
<div id="dashtable">

(closing "div" is in footer element. )

Thoughts? 

[MayMusic]

Try with

#dashtable table:nth-of-type(2)

And see if that helps

[Clint]

Thanks for the help. 

I gave that a shot and it did not work unfortunately.  In fact, that change stopped it from working in Caspio's preview as well (both preview and deployed now have the extra aggregate fields).

Any other tips?

Thanks,

Clint

[douvega]

Hi,

I think you could use some jQuery lines to grab those 3 cells and hidding them. Could you please deploy the datapage in URL mode and share the link to provide you with the proper coding?

Please remove authentication if applicable.

Regards.

[DefinitelyNot31337]

Hi Clint,

 

Just to verify that we don't miss the standard way of doing stuff, though it's kind of obvious, would you want to hide the whole column?

If so, you can just remove the field in Select Results Page Fields, or set its form element to Hidden in Configure Results Page Fields > field > Editing.

Else, it's much better if you can provide your DataPage, probably with sample data and via Deployment URL / Exported file to better help you.

 

Regards,

DN31337

[Clint]

Unfortunately I can't share the datapage because it's authenticated. 

I'm tracking with you on hidden elements. However, this is not an element. Caspio adds columns to tables when using an aggregate field.  And, one cannot hide formula columns, which are required when loading in data via SQL for other calculations (except via CSS). Hiding columns via CSS works, as long as you don't mind the the extra aggregate columns showing (as in the original attached photo). 

Any other things to try? There must be a way to specify that column in that row... 

[futurist]

On 9/25/2018 at 9:33 AM, Clint said:

I'm struggling getting some CSS correct in a tabular datapage and could use some help. Aggregate rows do not respond to hiding columns in the same way that data rows do when deployed. (See screenshots)

In this example, I'm trying to hide three extra cells in the aggregate row. When I preview the datapage it works. When I deploy the datapage, it does not.  Note that the first 4 sets of table selectors all work.

Here's the CSS in my header element:

<style>
<!-- WORKS: -->

#dashtable table:nth-of-type(1) td:nth-of-type(9)  {display: none;}
#dashtable table:nth-of-type(1) th:nth-of-type(9)  {display: none;}

#dashtable table:nth-of-type(1) td:nth-of-type(7)  {display: none;}
#dashtable table:nth-of-type(1) th:nth-of-type(7)  {display: none;}

#dashtable table:nth-of-type(1) td:nth-of-type(8)  {display: none;}
#dashtable table:nth-of-type(1) th:nth-of-type(8)  {display: none;}

#dashtable table:nth-of-type(1) td:nth-of-type(6)  {text-align:center;}
#dashtable table:nth-of-type(1) th:nth-of-type(6)  {text-align:center;}

<!-- PREVIEW WORKS, DOES NOT WORK WHEN DEPLOYED: -->
#dashtable .cbResultSetTotalsDataCell {display:none;}

</style> 
<div id="dashtable">

(closing "div" is in footer element. )

Thoughts? 

 Hi,

Jus to add, you may refer to this link on how to hide (or do any other CSS) multiple sibling elements all at once:

 

[autonumber]

Hi! Just to update this post, this forum post might be helpful.