• Registered: 2014-09-11
  • Posts: 5

Topic: Height Problems

I am having a terrible time getting my galleries to properly size in height. They always go to 100% size, even when contained inside a smaller div. Maybe I'm overlooking something totally simple (I probably am), but I'm at my wits end.

Here is my testing gallery:
http://unitychristian.net/gallerytest/volleyball2.php

As you can see, the gallery extends off-screen no matter the size of the browser window. I want it to resize to stay all inside the window. I was able to get width to work, but height never obeys. Technically the gallery part will, but the background always extends downward past the end of the parent div and ends up overlapping the bottom bar across our webpage. I got it to not overlap by making my parent div taller, but that really isn't the solution I need. I need it to resize properly.

Here is my embed code if it helps:

<div id="juicebox-parent-uchs" style="margin-bottom: 100px;">
<script src="volleyball2/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : 'volleyball2/',
    containerId : 'juicebox-container',
    galleryWidth : '100%',
    galleryHeight : '95%',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>
</div>
<style>
.jcbx-glry-classic {
    /* Firefox */
    width: -moz-calc(100% - 165px) !important;
    /* WebKit */
    width: -webkit-calc(100% - 165px) !important;
    /* Opera */
    width: -o-calc(100% - 165px) !important;
    /* Standard */
    width: calc(100% - 165px) !important;
    position: absolute;
}

</style>
<!--END JUICEBOX EMBED-->


Any help would be greatly appreciated. As I said I'm probably overlooking something simple. But the simple changes I see like "galleryHeight" in the embed don't seem to work. The background of the gallery still extends too far, while the gallery shrinks.

Thanks
Cole

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Height Problems

First of all, try removing the custom CSS which sets dimensions directly on the .jcbx-glry-classic class.
Juicebox itself will not know of your custom CSS and this may complicate matters.

Also, remove the margin-bottom: 100px; CSS rule on the gallery's parent container (at least for the time being).

These may be making things more complicated than necessary.

I would then try setting the gallery's width and height to 100% (so that the gallery fills its parent container, no matter what its size) and then assign the required dimensions to the parent container.

but the background always extends downward past the end of the parent div

It looks like the background you are referring to is the div with id="mainContainer" so check its height in your CSS. It looks like reducing its maximum height (via CSS max-height) may help.

  • Registered: 2014-09-11
  • Posts: 5

Re: Height Problems

Steven wrote:

First of all, try removing the custom CSS which sets dimensions directly on the .jcbx-glry-classic class.
Juicebox itself will not know of your custom CSS and this may complicate matters.

Also, remove the margin-bottom: 100px; CSS rule on the gallery's parent container (at least for the time being).

These may be making things more complicated than necessary.

I would then try setting the gallery's width and height to 100% (so that the gallery fills its parent container, no matter what its size) and then assign the required dimensions to the parent container.

but the background always extends downward past the end of the parent div

It looks like the background you are referring to is the div with id="mainContainer" so check its height in your CSS. It looks like reducing its maximum height (via CSS max-height) may help.

Sorry, I should have been more clear and descriptive. Those were the modifications I made to make the thing look half decent. I went ahead and pulled them out so that you can see what it looks like by default. If you could revisit and check it I would greatly appreciate it.

http://unitychristian.net/gallerytest/volleyball2.php

Thanks!
Cole


Also, here is what the embed code now looks like:

<script src="volleyball2/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : 'volleyball2/',
    containerId : 'juicebox-container',
    galleryWidth : '100%',
    galleryHeight : '100%',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Height Problems

Thank you for removing the extra code.
It looks like your gallery is being displayed immediately below your side menu (instead of to the right of it).
Try changing:

<div id="juicebox-container"></div>

... to:

<div id="juicebox-container" style="float: right;"></div>

Hopefully this will help.

  • Registered: 2014-09-11
  • Posts: 5

Re: Height Problems

Steven wrote:

Thank you for removing the extra code.
It looks like your gallery is being displayed immediately below your side menu (instead of to the right of it).
Try changing:

<div id="juicebox-container"></div>

... to:

<div id="juicebox-container" style="float: right;"></div>

Hopefully this will help.

Fantastic! I knew it would be something simple I wasn't thinking of. Thanks much!

Cole

  • Registered: 2014-09-11
  • Posts: 5

Re: Height Problems

Steven wrote:

Thank you for removing the extra code.
It looks like your gallery is being displayed immediately below your side menu (instead of to the right of it).
Try changing:

<div id="juicebox-container"></div>

... to:

<div id="juicebox-container" style="float: right;"></div>

Hopefully this will help.

One more thing though, I have updated it with the change, and it stays within bounds, but it still is too tall. It forces part of the thumbnails off-screen along with the blue bar along the bottom of our page. Any suggestions on getting it to resize properly?

Cole

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Height Problems

With your gallery having a height of 100%, it will fill its parent container (no matter what its size) so to reduce the gallery's height, you will need to reduce the height of the parent container or set a height for the parent container if it does not already have one. If setting the gallery's height to 100%, Juicebox needs to know what it should be 100% of.
Otherwise, try giving your gallery a fixed pixel height such as 600px or a smaller percentage height.
When using percentage heights, it may be necessary to use inline CSS to assign heights to parent containers.
Please see this note for Using Percentage Heights.

  • Registered: 2014-09-11
  • Posts: 5

Re: Height Problems

Steven wrote:

With your gallery having a height of 100%, it will fill its parent container (no matter what its size) so to reduce the gallery's height, you will need to reduce the height of the parent container or set a height for the parent container if it does not already have one. If setting the gallery's height to 100%, Juicebox needs to know what it should be 100% of.
Otherwise, try giving your gallery a fixed pixel height such as 600px or a smaller percentage height.
When using percentage heights, it may be necessary to use inline CSS to assign heights to parent containers.
Please see this note for Using Percentage Heights.

I swear I tried this multiple times and all it would do is give me a ~400px vertical blank space and no gallery. When I entered it again after your suggestion it did the same, then I refreshed it 3 or 4 times and then the gallery suddenly loaded as I wanted it. Weird stuff, but it works now. Thanks for your time.

Cole

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Height Problems

Maybe you just needed to completely clear your browser's cache in order to see the changes you had made.
In any case, I am glad that your problem has been resolved.
Thank you for posting back to let me know.