Apply CSS for Nth Child to Nth Child

[futurist]

For instances wherein you need to apply CSS to multiple sibling elements at the same time, for example hiding the 8th to 11th column in a Tabular Report DataPage, what we would normally do is to refer to each of those elements individually, like so:

<style>
form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(8),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(8),
form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(9),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(9),
form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(10),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(10),
form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(11),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(11)
{
display:none !important;
}

This approach works, but this would be lengthy, especially if there are more sibling elements you have to include in the CSS. This can actually be shortened, wherein you would only have to specify the range of siblings that are going to be included. Using the above example, it could be further shortened to this:

form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(n+8):nth-child(-n+11),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(n+8):nth-child(-n+11) 
 {
display:none !important;
}

Wherein the "8" represents the starting point, and the "11" is the ending point. So everything within this range (8th to 11th sibling) would be included, and the rest are not. 

[DesiLogi]

Hi @futurist,

This is great--thanks for posting.

[DesiLogi]

Hi @futurist,

I'm trying to use this code on a datapage with many hidden columns--it'd be great to narrow down the list.  The css I have is: 

#target table:nth-of-type(1) td:nth-of-type(13) {display: none;}
#target table:nth-of-type(1) th:nth-of-type(13) {display: none;}
#target table:nth-of-type(2) th:nth-of-type(13) {display: none;}

all the way to 

#target table:nth-of-type(1) td:nth-of-type(49) {display: none;}
#target table:nth-of-type(1) th:nth-of-type(49) {display: none;}
#target table:nth-of-type(2) th:nth-of-type(49) {display: none;}
 

The 3rd lines are there for reason of hiding totals. I can't get your code to work with this--how would I fit this scenario/range into your code? Thanks for helping out with this--really looking forward to a more efficient css on a number of datapages. 

[futurist]

Hi @DesiLogi,

 

Without the 3rd lines, does the CSS work? Not exactly sure what totals you're pertaining to, could you send the link to your DP?

 

Have you also tried:

form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(n+13):nth-child(-n+49),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(n+13):nth-child(-n+49) 
 {
display:none !important;
}

 

[DesiLogi]

Hi @futurist,

If I remember correctly now the 3rd line is actually because the sticky header would group labels together in a jumble in the far right, as a column of its own, if there were aggregations. It was provided by Caspio to fix that issue. 

I've tried the code in the header and footer but can't get it to work. I've tried putting the appkey with/without the '@' in front of it. Is this syntax not right? 

form[action*='[c21040002ee6fefe07bc4cfaa6ba]'] tr.cbResultSetDataRow td:nth-child(n+13):nth-child(-n+49),
form[action*='[c21040002ee6fefe07bc4cfaa6ba]'] tr.cbResultSetTableHeader th:nth-child(n+13):nth-child(-n+49) 
 {
display:none !important;
}

[futurist]

hi @DesiLogi,

you dont actually need to change anything with the css i provided. have you tried pasting it as it is and see if it worked?

[DesiLogi]

Hi @futurist,

Ah thanks--I'd thought I needed to put the actual appkey of the datapage in there. When I put it in as you posted it did hide the designated columns. However, it also constrained the columns to about 1000 pixels for some reason. I have the columns set for width to either 10%, 30%, etc or 'auto' so they should expand to the screen. I'm not sure what is creating the constraint. Here's an image of it: 

[DesiLogi]

On further testing when I removed the aggregation it spread out as it should. So something with having the aggregation field is causing the constraint. 

[futurist]

23 minutes ago, DesiLogi said:

Hi @futurist,

Ah thanks--I'd thought I needed to put the actual appkey of the datapage in there. When I put it in as you posted it did hide the designated columns. However, it also constrained the columns to about 1000 pixels for some reason. I have the columns set for width to either 10%, 30%, etc or 'auto' so they should expand to the screen. I'm not sure what is creating the constraint. Here's an image of it: 

Ah, I did encounter this. something about hiding many columns seem to be causing this. what ended up working is a javascript that brings back the width of the dp to 100%. You can paste this on your footer:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

document.querySelector(".cbResultSetTable").style.width = "100%"
});
</script>

[DesiLogi]

This makes sense but strangely it's not working--the aggregation keeps causing a problem, not sure why. I'll try some more mods and post back if I can narrow it down. Thanks again for the help--this is a really nice solution. 

[cheonsa]

On 9/30/2022 at 12:58 PM, DesiLogi said:

This makes sense but strangely it's not working--the aggregation keeps causing a problem, not sure why. I'll try some more mods and post back if I can narrow it down. Thanks again for the help--this is a really nice solution. 

Hi @DesiLogi,

You can add this line of code to hide the cell in the Totals and Aggregations as well:

form[action*='[@cbAppKey]'] tr.cbResultSetTotalsRow td:nth-child(n+20):nth-child(-n+29),

[DesiLogi]

Hi @cheonsa,

Thanks for posting this--that's really great. Also, the CSS that ended up working for this particular datapage is: 

#target table:nth-of-type(1) td:nth-of-type(n+23):nth-child(-n+49) {display: none;}
#target table:nth-of-type(1) th:nth-of-type(n+23):nth-child(-n+49) {display: none;}
#target table:nth-of-type(2) th:nth-of-type(n+23):nth-child(-n+49) {display: none;}

Between these two methods it should be a clean, more efficient datapage. 

[Pumpedplop]

Hello,

I also have encounterd issues with aggregates and hidding certain collumns, From a different post ( I can not find it) I tried this solution but my aggregate still isn't displaying anything if I remove the code to hide the columns the aggregate does work.