Not signed in (Sign In)

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

Lightview: Lightview + IE7/IE8 + long inline content = no scroll?

Bottom of Page

1 to 13 of 13

  1.  
    • CommentAuthorintel352
    • CommentTimeApr 8th 2009
     
    Lightview appears to have a bug regarding scrolling in IE7/IE8 (note: I'm using prototype 1.6.1 RC2, seems to work fine in IE7/IE8).

    Anyways, when displaying inline content in Lightview, that is a large amount of content, setting the overflow option to "auto" works fine in Firefox, but not in IE.
    Using IE8's debugger, it turns out that Lightview, when detecting IE & when overflow is anything other than "hidden", will set overflow-y to hidden, overflow-x to hidden, and overflow to visible.
    I don't know if that works on older versions of IE? But it clearly doesn't work in my tests on WinXP & IE7/IE8, as I see the inline content is cut off, with no ability to scroll.

    Checking multiple websites regarding IE's known bug with not displaying a scroll bar for overflow content, each website says you just need "position: relative" and "overflow: auto", which properly creates the scroll bar.
    Lightview already has position: relative (in the .css), so if it just would stop getting creative with the overflows, all would be good.

    Cheers
  2.  
    Check the demonstration on the Lightview website, it has long content and works fine in IE. It could be that your site don't have a correct doctype causing it to be in quirksmode, that messes up calculated dimensions. It could also be that your CSS is causing a conflict, but without seeing something I can of course only guess.
    • CommentAuthorintel352
    • CommentTimeApr 8th 2009
     
    My overflow-y was being set to hidden, whereas your demo has it being set to auto, that's the difference. I'm not sure what's *causing* that difference though.
    • CommentAuthorjc22
    • CommentTimeAug 31st 2009
     
    I'm having the same issue. I'm using doctype:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    and sending the header IE7 emulate header (X-UA-Compatible: IE=EmulateIE7) since it doesn't work in IE8 otherwise.
  5.  
    You don't need an emulate tag when using the latest Prototype, see 'IE8 Compatibility' in the installation instructions. Also when you use a doctype it has to be the first thing on the page, having anything above your doctype will render it useless.
    • CommentAuthorjc22
    • CommentTimeAug 31st 2009
     
    I just tried downloading the latest prototype (1.6.1 rc3) and removing the emulate tag. Lightview works in IE8, but I'm still getting the overflow issue for long inline content.

    The doctype is at the top, like this:
  7.  
    • CommentAuthorjc22
    • CommentTimeAug 31st 2009
     
    I just tried it on a page that passed validation with the recommended transitional doctype and it still has the same issue.

    Is there anything else I can try?
  9.  
    I can only guess, perhaps the element you pull inline doesn't have a proper height in IE8, that can happen when you don't clear floats properly for one. Scrollbars work fine for me on IE8 using the Lightview website without the emulate tag.
    • CommentAuthorjc22
    • CommentTimeSep 2nd 2009
     
    Ok, I think I figured out a way to make it work. Seems like for lightview links for inline content, you have to have the option "autosize:true" set. I found this out by using the example HTML from http://www.nickstakenburg.com/projects/lightview/. If you make a simple page that uses this link, it works:

    <a href='#documentation' class='lightview' title="Inline content :: the caption :: autosize: true">link</a>


    If you use this link, it doesn't:

    <a href='#documentation' class='lightview' title="Inline content">link</a>


    Unfortunately, it autosizes the width too, but I guess I can live with that.
    • CommentAuthorGuest
    • CommentTimeDec 2nd 2009
     
    Guest:

    Yeah, same issue.. although I need in this case to be able to specify a width for readability issues. I'll post the fix I come up with .. maybe a patch file if it needs it.

    Just FYI, I paid for a license, if that makes a difference as to what my opinion is. =) Nice product so far besides this.
    • CommentAuthorGuest
    • CommentTimeDec 2nd 2009
     
    Guest:

    meh, I didn't realize it was packed. If I could fix the bug without all the hassle of unpacking it I would. And it should be clear that it is a bug, related to the configuration options, and not related to doctype or misuse.
  13.  
    I wasn't sure if anyone found a solution to this so I played around and found a very simple solution for myself based on the exchanges above.

    I came across the following website:
    http://www.brunildo.org/test/Overflowxy2.html
    It explained some of the quirky behaviors with overflow in each browser.

    With some of the knowledge above I decide to do this:

    Keep the default value in lightview.js to "overflow: 'auto' "
    In your Lightview.show function ...inside options: {} add overflow: 'hidden'.
    Then, add overflow-y: auto !important; to the .lv_contentBottom class in lightview.css.

    Doing this works for my application and I wish I had discovered this earlier...hope it helps.

1 to 13 of 13

  1.  
Add your comments

    Username PasswordPlease enter the following code:
  • Format comments as
 
Back to Discussions Top of Page