Skip to main content

I have created a printable form using skuid components in a V1 page. It looks and works great. I just have one last snag. we now need to print these forms. The checkboxes in the table components are too light when in read mode. They don’t even print on some printers and others they are barely visible. Though I can put a template component with checkboxes in them and style those fine, I cannot get the any styling approaches to take effect on the checkboxes in the skuid table components. Can someone rescue me from my design prison? Just a black border would be fine, but the ability to control border color, weight, background color and size would be great. I know there are issues browsers and checkboxes, but I am able to style checkboxes in a template component, so why not a skuid table component?


Thanks!

Hey @Skuidward_Tentacles


Can you send me a simplified XML so i can see if we can take a look?


Since you are working in V1 it will be hard to get the full context for you since this is very specific , but you will have to do some custom css on the print media style.


I found this link that you can use as a starting point:


@media - CSS: Cascading Style Sheets | MDN


Thanks,


thanks, Germany!


The most basic version is to just take a V1 page and add a field editor and/or table and or deck. Add a checkbox field to the component(s).


That’s it. From there just make the checkboxes look different than the browser default. My need is to have them render darker than chrome renders them because I have laid out my page to be printable and the default rendering of unchecked boxes is too light to be clearly visible when printed.


I have been able to add checkboxes via code to a template component and manipulate the look through CSS, but I haven’t been able to apply CSS to Skuid check boxes.


Thanks!


Reply