Indexhibit Support

Hi,

I'm having trouble with the text I would like to use as a caption in overlay.
It appears that there is a maximum height for the captions, making some text fall off the page if the page height is smaller then the caption box.
I would like to be able to scroll down in the text so it's possible to read everything.

Any idea on how to fix this?
You can take a look over here:
morgenarchitectuur.be/nl/werk/heist-op-den-berg-cc-zwaneberg/

Thanks!

What did you do to the overlay? The overlay is appearing over the image...

Do you mean the caption overlay?
Because I don't see something strange...

Here is the code I use:

/* the overlay */
/* edit with caution */
/* dark theme for overlay */
.dark-overlay { background-color: #000; /* opacity: 0.9; */ }
.dark-dialog { color: #fff; }
.dark-dialog #dialog-close a { background: transparent url(../img/close-black.gif) no-repeat; }
.dark-dialog #position { color: #fff; }
.dark-dialog #dialog-title { color: #fff; }
.dark-dialog #dialog-box-text { color: #fff; }
.dark-dialog #dialog-toggle { background: #000; }
.dark-dialog #dialog-toggle a { /* color: red; */ }

/* light theme for overlay */
.light-overlay { background-color: #fff; opacity: 0.95; }
.light-dialog { color: #000; }
.light-dialog #dialog-close a { background: transparent url(../img/close.gif) no-repeat; }
.light-dialog #position { color: #000; }
.light-dialog #dialog-title { color: #000; }
.light-dialog #dialog-box-text { color: #000; }
.light-dialog #dialog-toggle { background: #fff; }
.light-dialog #dialog-toggle a { /* color: red; */ }

/* you won't really need to change these except for maybe margins/paddings */
#overlay { position: fixed; top: 0; left: 0; width: 100%; display: none; z-index: 3; }
#dialog { position: fixed; top: 0; left: 0; text-align: left; width: 100%; padding: 0; margin: 0; }
#dialog-close { position: absolute; right: 24px; top: 24px; cursor: pointer; height: 16px; width: 16px; text-indent: -9999px; z-index: 8888; }
#dialog-close a { display: block; width: 16px; height: 16px; }
#dialog-close a:hover { opacity: 0.5; }
.dialog-content { padding: 0; top: 0; left: 0; position: absolute; width: 100%; }
.dialog-content .container { margin: 0; padding: 0; }
#dialog-box-text { width: 500px; background-color: #fff; opacity: 0.90; }
#dialog-toggle { display: none; padding: 3px 6px 6px 0; }
#dialog .the-content { display: block; z-index: 14; position: relative; width: 100%; }
#dialog #loading-dock { position: absolute; z-index: 25; }
#dialog #dialog-close-layer { background: red; width: 100%; height: 100%; position: absolute; top: 1; left: 0; z-index: 2; }
#dialog #dialog-close-layer a { display: block; width: 100%; height: 100%; background: green; }
#inner-content { position: relative; }
#inner-top { position: absolute; top: 0; left: 0; width: 100%; height: 60px; z-index: 15; }
#inner-bot { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 16; text-align: right; }
a.next:hover { background: transparent url(../img/next.gif) no-repeat 90% 50%; opacity: 0.25; top: 0; bottom: 0; display: absolute; z-index: 3; }
a.previous:hover { background: transparent url(../img/previous.gif) no-repeat 10% 50%; opacity: 0.25; top: 0; bottom: 0; display: absolute; z-index: 4; }
#box-text { text-align: left; }
#position { padding: 0 27px 27px 0; }
#loading-dock { display: none; position: absolute; width: 35px; height: 35px; z-index: 9999; }
.loading { position: absolute; top: 18px; left: 0; z-index: 1;
text-align: center; width: 24px; height: 24px;
background-position: center top; background-repeat: no-repeat; }

Check this out:

1. #dialog-box-text {
2.     background-color: rgba(0, 0, 0, 0);
3.     height: 100% !important;
4.     opacity: 0.9;
5.     position: absolute;
6.     width: 500px;
7. }
8. .light-dialog #dialog-toggle {
9.     background: none repeat scroll 0 0 #FFFFFF;
10.     max-height: 80%;
11.     overflow: auto;
12.     padding: 20px 20px 20px 0;
13.     position: fixed;
14.     width: 500px;
15. }

add this at the bottom of your overlay.css (so you can keep track of your edits; you can change certain values in this solution and gegeraly its a starting point.)

Works great!

Any chance to hide the scroll bar?
Or would I just need to use divs for that?

Thanks!

I don't understand: why would you hide the scrollbar (intervene with default browser behavior) if your visitor won't know that there's more text in that box?
The content is already in a div.