futurist Posted September 21, 2022 Report Share Posted September 21, 2022 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. kpcollier, autonumber and DesiLogi 1 2 Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted September 27, 2022 Report Share Posted September 27, 2022 Hi @futurist, This is great--thanks for posting. Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted September 30, 2022 Report Share Posted September 30, 2022 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. Quote Link to comment Share on other sites More sharing options...
futurist Posted September 30, 2022 Author Report Share Posted September 30, 2022 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;} Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted September 30, 2022 Report Share Posted September 30, 2022 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; } Quote Link to comment Share on other sites More sharing options...
futurist Posted September 30, 2022 Author Report Share Posted September 30, 2022 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? Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted September 30, 2022 Report Share Posted September 30, 2022 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: Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted September 30, 2022 Report Share Posted September 30, 2022 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. Quote Link to comment Share on other sites More sharing options...
futurist Posted September 30, 2022 Author Report Share Posted September 30, 2022 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> Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted September 30, 2022 Report Share Posted September 30, 2022 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. Quote Link to comment Share on other sites More sharing options...
cheonsa Posted January 20, 2023 Report Share Posted January 20, 2023 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), Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted January 30, 2023 Report Share Posted January 30, 2023 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. cheonsa 1 Quote Link to comment Share on other sites More sharing options...
Pumpedplop Posted April 3, 2023 Report Share Posted April 3, 2023 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.