Troubleshooting: Table Settings Icon for Table component not showing up

PROBLEM: Table Settings Icon for Table component not showing up

RESOLUTION: User’s custom styling was causing the icon to render off screen, giving it the appearance that it was not rendering at all.

Problem Details:

The user’s setup involved a Table component inside of a Drawer component with some custom styling in place on the user’s end. The user reported that the icon for accessing the Table component’s settings was not rendering.

MO0xDFs30xhtS-80Umql3FdZAMqyAWZhf9UJO_64d_EeAcbzoCUrOFHwvGssl4isSPTlmuhJIWLBjrHXT2AEsdjIVEn-ULAsZ8QJ3TFkulwGGTN57z8Ezm3jzfcc1eY7-0Zr1GH0

Resolution Process:

  • First, I checked in the Skuid Composer to see if the proper Skuid Table properties were turned on. In order to get that Table Settings icon to render, you need to go to your Skuid Table properties, click the Display tab, and toggle on “Allow column hiding” under Configuration. The setting was turned on for the user’s org but the icon would still not show.

  • Next, I tried to see if the icon would render if I created a brand new table on their page. However, the icon would not appear for my table either.

  • I wanted to test to make sure the header for the table was rendering at all, so I added a title and search box to the table header. The title and search box showed up meaning the header was rendering properly. However, the positioning of the title and search bar were displaying in a strange position which led me to believe there was some custom styling being done to the tables.
  • From my previous steps I believed that the table settings icon was rendering on the page somewhere but it was misplaced due to the custom styling similar to what was happening to the table’s search bar and title. To double check I went into the Elements tab of the browser console in Google Chrome and searched for the button class “nx-button-list-config” to see if I could locate the table settings icon. This led me to the table settings icon which was rendering off screen on the far right.

Wf4_OQJgRRN46Un21-HvXMJ0WGQe6ecnygf_W647ZiBAThgOcitREoIbQ42WskdEiKMKASAABur2oCwLCd6kYyIdsa6kNf0hNBka6Ms-iN6oNVbgTnf7SoDyfIufBwXpiasrXU2N

  • I notified the client that the table settings icon was in fact rendering and that they needed to make changes to their custom styling to resolve the issue of the component’s location.

BONUS: Another way you can check for hidden/misplaced page elements is to zoom all the way out on your browser. You can do this by going into your browser settings and adjusting the zoom. There are also keyboard shortcuts to do this as well.

Outcome:

The problem was resolved by confirming that the icon was rendering, finding the icon’s location on the page, and notifying the user that they need to double check their custom styling for their page.

Takeaways:

If you are having trouble locating a page component and your page has custom styling in place, it could be that your component is just misplaced somewhere on the page. If possible, it is good to check what the expected behavior is of the component by testing a fresh component out on a clean page. It is also good to search the Elements tab in the browser console to see if the component is showing up at all.

Get help with an issue

Ask in the Skuid user community in the

If you have paid support, ask your question on our support portal