scrollY percentage instead of width

scrollY percentage instead of width

Nem2kNem2k Posts: 5Questions: 1Answers: 0

Is there a way to use a percentage value for scrollY instead of pixels?

Setting pixels doesnt look very nice if the user resizes the window and would rather have the table always be 100% of the window height, but show the scroll bar if there are more entries than can be shown for that given height

Replies

  • allanallan Posts: 64,311Questions: 1Answers: 10,621 Site admin

    Percentage height doesn't work well in CSS. However, you can use vh units: scrollX: '90vh - example, which does work well.

    Alternatively, I wrote a "fit to container" plug-in for the scrolling a little while ago which you can find here.

    Allan

  • Nem2kNem2k Posts: 5Questions: 1Answers: 0
    edited August 2016

    I took a look at scrollResize but cant seem to get it to work as the whole page just keeps scrolling if I have too many entries:

    <script type="text/javascript" language="javascript" src="js/DataTables/dataTables.scrollResize.js"></script>
    
    <script>$(document).ready(function() {
                $('#example').DataTable({
                    'paging': false,
                    scrollResize: true,
                    scrollCollapse: true,
                    "info": false,
                    "processing": false,
                    stateSave: true,
                    "ordering": true,
                    "orderMulti": true,
                    colReorder: {
                        realtime: false
                    },
                    fixedHeader: {
                        header: false,
                        footer: false
                    },
                    select: true
                });
            } );</script>
    

    Ive noticed this with some other plugins, but does scrollResize interact negatively with any of the things I have turned on?

  • allanallan Posts: 64,311Questions: 1Answers: 10,621 Site admin

    I would need a link to the page showing the issue to understand why it isn't working for you.

    Allan

  • Nem2kNem2k Posts: 5Questions: 1Answers: 0

    Heres a link to a test site: http://mytestwebsite123.comli.com/

    I was hoping that the datatable would always fit 100% of screen height, but scroll bars appear for the table itself (instead of the page) if there are too many rows

  • allanallan Posts: 64,311Questions: 1Answers: 10,621 Site admin

    There doesn't appear to be any constraint on the height of the container element. You might set your #items element to be 100vh for example.

    The plug-in I linked to is fit to container as I mentioned, so you need to have the container set to the size you want, like in the examples in that repo.

    Allan

  • Nem2kNem2k Posts: 5Questions: 1Answers: 0

    ah got it, thanks!

This discussion has been closed.