ColorBox doesn't Change Width Dynamically

Question

I am using Jquery colorbox plugin at my HTML application. There are two divs at my page. One is at left and one is at right . I want that. At the beginning right div's display is none . When I click somewhere at my left div right div's display becomes block . However because of the size of colorbox place second div display's under first div and a scrollbar appears. I don't want that I want it to locate at right I mean I want colorbox to calculate its width again automatically (If possible I don't want to declare a width to fix it)

PS 1: My left and right div's css':

.left {
    float: left;
    display: inline;
}

.right {
    float: right;
    display: inline;
}

When I don't hide (I use Jquery .show() ) second div(right div):

one of is at right other at left.

However when I hide (I use Jquery .hide() ) second and after I show it (I do $.colorbox.resize(); ) my second div appears at bottom of first one(not at right).

PS 2: I get my colorbox content from an external file

Answer 1

colorbox changes its height automatically but doesn't change width. So I did that:

$.colorbox.resize({width: pixelValue}); 

Answer 2

只需致电：

$.colorbox.resize();

Answer 3

Try this

var contentHeight = $('.class').height();

var contentWidth = $('.class').width();

$.colorbox.resize({ height: contentHeight, width: contentWidth });