I am using colorbox to open a window in the middle of a webpage and I am using the iframe version. At the moment I am just developing the basic code as a model so I can implement it across several applications.
I am trying to clean up the look and simplify it to math my applications and I am stuck with a 28 pixel margin at the bottom of the window. I have been successful in updating the margins by using the technique of hiding the borders and adding a border class like this:
$("#cboxContent").addClass("blue_border_example");
where blue_border_example is the style I want.
But I am not having any success removing the 28 pixel bottom whitespace. It appears to be coming from the id="cboxLoadedContent", so I have tried adding the statement below in the window code that I am loading:
$("#cboxLoadedContent").addClass("remove_bottom_margin");
where remove_bottom_margin is the style:
.remove_bottom_margin { margin-bottom: 0px !important;}
I assumed that this style could be added in the document ready function for the program that is being loaded into the iframe but that doesn't seem to work.
Any ideas on why this doesn't work and what I should do to solve it?
Is there a need to do this via jQuery? Why not do it directly in your css. So there's no need to have those 2 jQuery lines.
Add this in your CSS.
#cboxWrapper #cboxLoadedContent,
#cboxWrapper #cboxContent {
margin-bottom: 0px;
}