DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Scrollable lightbox?

Scrollable lightbox?

TomBajzekTomBajzek Posts: 164Questions: 37Answers: 1
edited August 2019 in Editor

I have an editor with a rather tall form displayed in a lightbox. This form is taller than many users' browser windows will be, or for some devices, taller than the window can be. I've not been able to force this lightbox to be scrollable. I've tried adding overflow: scroll to a variety of HTML elements within the lightbox: DTE_Body_Content, DTE_Body, DTE_Form_Content, DTE_Form_Info. None of these have had the desired effect. Adding !important did not help.

I'm using DataTables styling for this, primarily, with a few tweaks for my own for situations not covered in the DataTables styles.

How can I make this form in this lightbox always scrollable?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @TomBajzek ,

    By default the lightbox should be scrollable - see example here (forced, as I just duplicated fields). Would you be able to modify that please to demonstrate your issue, or link to your page if possible.

    Cheers,

    Colin

  • TomBajzekTomBajzek Posts: 164Questions: 37Answers: 1

    Hi Colin,

    IT turns out that this problem is stranger than I'd realized. It happens that there is a scrollbar in some cases where I'd not noticed it because the lightbox was a hair too narrow, and the horizontal scrollbar is off the bottom of the screen - if you see the horizontal scrollbar and scroll to the right you would see the vertical scrollbar. Refreshing things today has made this issue disappear, so perhaps something was wrong that I never actually go to see.

    However, with the vertical scrollbar now visible when it is needed, you cannot scroll to the bottom of the lightbox, so you cannot get to the Save/Update button, even when I make my screen as tall as my monitor.

    I think my editor is fairly straightforward, except that the height of the lightbox depends on the value of the reqType field, which adds lines to the form if the reqType is Estimate Request. In any case if the window is not taller than the lightbox, you can't scroll to the bottom no matter which length of form you have.

    I had thought the problem might be local to the Safari browser, but I find that Chrome behaves the same way.

    I've put this page where you can see it at https://bajzek.com/Chores/tasks.php

    I've tried commenting out the JS code that adjusts the length of the form based on reqType, but that didn't make it work correctly.

    I'd appreciate it if you would take a look.

    Thanks,
    Tom

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @TomBajzek ,

    I suspect it's got something to do with these jQuery hide() and show() methods - they're going underneath Editor so it isn't aware of the change in the form.

    It would be better to use dependent() as in this example here, and then hide() and show() to adjust the visibility of the fields (also in that example).

    Would you be able to give that a try, please, and report back!

    Cheers,

    Colin

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    I've just had a quick look at $(window).height() is returning 1459 for me on your page, which is much larger than the window height actually is.

    It looks like your page is running in quirks mode due to invalid HTML:

    <html lang="en"><head><!doctype html>
<html>
    <head>

    Allan

  • TomBajzekTomBajzek Posts: 164Questions: 37Answers: 1

    Allan's answer solved this problem. I'd never noticed the HTML problem as it is in a large set of programs that all otherwise behave as expected. It's really the first time that this created a problem, and I never noticed it until now.

    Kudos to Allan for spotting it.

    Many thanks,
    Tom

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.