Jump to content

Apply CSS for Nth Child to Nth Child


Recommended Posts

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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;
}

 

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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: 

column+cuttoff.png

Link to comment
Share on other sites

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: 

column+cuttoff.png

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>

Link to comment
Share on other sites

  • 3 months later...
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),

Link to comment
Share on other sites

  • 2 weeks later...

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. 

Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...