I need to be able to fill a particular column of an igGrid with a specific background color and have no padding. I don't want to affect any other columns.
In the dataRendered event I have tried the following (plus many more), but I still have padding around my cell content. How do I remove all padding?
ui.owner.element.find("tr td:nth-child(2)").css("padding", 0);
ui.owner.element.find("tr td:nth-child(2)").css("background-color", "red");
Hi hrwebb,
You're welcome! I'm glad I was able to help you find a solution.
I want to thank you for your research into the problem. Using your example caused me to try some different things which finally led to the solution.
I didn't think it should matter, but I was working with a hierarchical grid. I was able to get things working with an igGrid. But when working with the hierarchical grid nothing seemed to work. I finally figured out that specifying the nth-child for a hierarchical grid is different than for igGrids. I was using the nth-child(1) but that didn't work. I finally realized that was pointing to the +/- symbol for expanding a grid. I changed to a different nth-child and got the result I was looking for.
Hello hrwebb,
Thank you for posting in our forums!
I have a few questions about this. First, do you have any additional CSS on the page that may be interfering with this somehow?
And second, are you sure you are seeing padding and not the margins or the border? I have put together a quick jsFiddle here using the code you provided and the only thing I notice is the horizontal border between the cells. If this is the same result you are seeing, you can comment out the line in my dataRendered handler to remove the border.
Please check out my fiddle and let me know what may be different with your page. And feel free to modify the fiddle and update me, or provide your own sample that reproduces the issue.
Looking forward to hearing from you.