Why do i have different Width for Wrapper and ContentBox ?

[AntonGrekov]

I am using colorbox for a simple fast purchase window in opencart extension. I am calling colorbox with this args(i tried many different variations actually):

$.colorbox({
    maxWidth: "510px",
    height: "370px",
    innerWidth: "100%",
    ...
}

As a result main cbox div(wrapper) has 510px width but cboxContent 462 , a 48px smaller. I googled for couple hours but have not found an answer how to make width equal.

[jackmoore]

It's because of the chrome around Colorbox, the frame that exists between the content and the background. The innerWidth property specifies how width the content inside Colorbox should be. You'd typically use innerWidth (width of the content) or width (width of the content + the Colorbox frame/border), but not both at once. Some applications benefit from specifying the content size, while some need to account for the overall size.

You are welcome to change the CSS so that there is no frame around your content, which would mean the content width (innerWidth) would match the outside width (width or maxWidth).

[AntonGrekov]

You are welcome to change the CSS so that there is no frame around your content, which would mean the content width (innerWidth) would match the outside width (width or maxWidth).

Thanks for your answer, but that doesnt solve my issue. Even if i replace innerWidth with width setting i get same exact result: wrapper - 510px, cboxContent 462px. (i set width to "90%", because i want responsivness to colorbox modal window)

And i also unable to change css propersties since all width is applied inline with higher priority to my css rules.

[jackmoore]

You don't need to create a new ticket for me to see your feedback. Github tickets is not a support group, it's for things that need to be fixed in the code. I don't plan on changing the code based around this, so I closed the ticket. No offense intended.

but that doesnt solve my issue.

You asked why are these sizes are different and I tried to answer that. Let me see if I understand your issue better now. Are you saying that you want Colorbox to take up 90% of the screen width, but that the content should have a min-width of 510px?

This is some sophisticated than what Colorbox can handle through it's parameters, it just covers the basics and doesn't try to recreate the full range of what you can accomplish with CSS. My advice would be to wrap your content with an element that lays out how big you want that content to be on screen. Something like this:

$.colorbox({html: '<div style="width: 90vw; min-width: 510px">Hello!</div>'});

Colorbox adds your content to the DOM and measures it before displaying, so it will respect layout rules & styles you apply to your content. I used vw instead of percent-based width. Percent is based on the parent, which in this case would be the staging area that Colorbox measures your content in, instead of the size of the screen, which isn't helpful in this case. I hope that's somewhat helpful.

[AntonGrekov]

Thanks again for answering. Sorry for being that much disturbing. You understand my issue correctly with only one wrong (doesn't matter at all) little fix - i want max-width to be 510px.

Actually, i am not looking for support, i just want to understand how colorbox works more deeply, but that actually also not a thing to create tickets.... sorry...

Let's suppose this ticket solved for now.