locked
HTML Table Control - Fixing Table Header When Scrolling RRS feed

  • Question

  • Any ideas how to fix the header row in the HTML Table Control when the user scrolls?

    Tuesday, April 8, 2014 8:05 PM

Answers

  • It is tricky with the tbody height and the column widths but possible on a table by table basis. Adjusting the css and making use of the '_postRender' event does the same:

    <style>
    ...
    .theadfixed thead {
        text-align:left;
        display: block;
        float: left;
        width: 100%;
    }
    .theadfixed thead tr {
        display: table-row !important;
        width: 100% !important;
    }
    .theadfixed tbody {
        display: block;
        height: 480px;
        overflow: auto;
        float: left;
        width: 100%;
    }
    .theadfixed tbody tr {
        display: table-row !important;
        width: 100% !important;
    }
    .theadfixed th, td {
        width: 200px !important;
    }
    .theadfixed table {
        table-layout: fixed !important;
    }
    ...
    </style>
    
    myapp.BrowseReservations.Reservations_postRender = function (element, contentItem) {
        setTimeout(function () {
            $("table", element).addClass("theadfixed");
        }, 100);
    };

    I think I will use it myself :)

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Proposed as answer by Xpert360 Tuesday, April 15, 2014 2:35 PM
    • Marked as answer by MajorT Wednesday, April 16, 2014 6:02 AM
    Tuesday, April 15, 2014 2:35 PM

All replies

  • We need workaround for this, you can submit this feature request to Visual Studio Uservoice site.
    Tuesday, April 15, 2014 12:56 PM
  • You could have a play with this css

    thead {
        text-align:left;
        display: block;
        float: left;
        width: 100%;
    }
    thead tr {
        display: table-row !important;
        width: 100% !important;
    }
    tbody {
        display: block;
        height: 480px;
        overflow: auto;
        float: left;
        width: 100%;
    }
    tbody tr {
        display: table-row !important;
        width: 100% !important;
    }
    th, td {
        width: 200px !important;
    }
    table {
        table-layout: fixed !important;
    }
    

    Which gives this sort of effect in IE11...

    LightSwitch HTML table with fixed header

    If you place that set of css style settings at the top of user-customization.css that is what I get. You may want to apply it as a class to a table for ease of use on a page by page basis.

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Tuesday, April 15, 2014 2:10 PM
  • It is tricky with the tbody height and the column widths but possible on a table by table basis. Adjusting the css and making use of the '_postRender' event does the same:

    <style>
    ...
    .theadfixed thead {
        text-align:left;
        display: block;
        float: left;
        width: 100%;
    }
    .theadfixed thead tr {
        display: table-row !important;
        width: 100% !important;
    }
    .theadfixed tbody {
        display: block;
        height: 480px;
        overflow: auto;
        float: left;
        width: 100%;
    }
    .theadfixed tbody tr {
        display: table-row !important;
        width: 100% !important;
    }
    .theadfixed th, td {
        width: 200px !important;
    }
    .theadfixed table {
        table-layout: fixed !important;
    }
    ...
    </style>
    
    myapp.BrowseReservations.Reservations_postRender = function (element, contentItem) {
        setTimeout(function () {
            $("table", element).addClass("theadfixed");
        }, 100);
    };

    I think I will use it myself :)

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Proposed as answer by Xpert360 Tuesday, April 15, 2014 2:35 PM
    • Marked as answer by MajorT Wednesday, April 16, 2014 6:02 AM
    Tuesday, April 15, 2014 2:35 PM
  • Dave, that is quite useful thanks.

    I have however noticed that adding the above CSS to a Table where the underlying query has paging enabled, will cause the Table to automatically load all subsequent pages after the first page as well.

    Do you have any idea why this might be the case?


    Regards, Xander. My Blog

    Wednesday, April 16, 2014 1:02 AM
  • Thank you Dave!

    Wednesday, April 16, 2014 6:07 AM
  • You are welcome!

    Hi Xander, I tried a few different settings but they did not stop the page loading. Whether that can be accomplished in css or msls-2.5.0.js I am not sure. This also needs checking on different browsers.

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Wednesday, April 16, 2014 8:30 AM
  • Hi Dave, I tried both IE11 and Chrome and they behave the same. Hopefully the LS picks on this requirement and adds it as a standard feature for a future release.

    Great tip nonetheless.


    Regards, Xander. My Blog

    Wednesday, April 16, 2014 8:34 AM
  • Revisiting this topic again... it seems to me that the jQuery.floatThead jQuery Plugin should be able to work for this purpose as the author of the plugin mentions on this Stack Overflow: Cannot get jQuery floatThead to work on table embedded in tabbed layers that it does work for jQueryMobile.

    I've spend about 20 mins trying to get it to work, without any luck, perhaps some of the more advanced jQuery members can help us out. I've tried the following:

    myapp.MyScreen.MyTableControl_postRender = function (element, contentItem) {
       var table = $(element).find(".msls-table");
       //$(table).floatThead("reflow");
       //$(table[0]).floatThead("reflow");
       $(table).floatThead(); // hides header altogether
    };
    In my case the table control is embedded inside a fixed height group control - I've yet to test the table control outside of that.


    Regards, Xander. My Blog

    • Edited by novascape Thursday, July 3, 2014 10:51 PM
    Thursday, July 3, 2014 10:50 PM
  • Hi Dave!

    With your CSS code there is a gap between the last column and the scroll bar.

    Is it possible to set the CSS for the table columns occupy 100% of the screen width?


    Ciro

    Friday, August 22, 2014 7:26 PM
  • my working variant for the fixing is the following:

    fixTableHeader = function (element) {
    
        var old_th = $(element).find("thead");
        var new_th = old_th.parent().clone(true);
        new_th.find("tbody").remove();
        new_th = new_th.wrap("<div class=\"msls-clear msls-presenter-content msls-font-style-normal msls-vauto msls-hscroll\"></div>").parent();
        old_th.remove();
        $(element).before(new_th);
    
    };

    works in the table post render handler like this:

    myapp.Browsecontracts.contracts_postRender = function (element, contentItem) {
        // Write code here.
        fixTableHeader(element);
    };


    Sergey Vdovin

    Friday, August 22, 2014 9:00 PM
  • @Sergey - thanks for sharing your solution.

    It seems to overcome the paging issue where the other solution above automatically keeps loading all the pages when paging is enabled. So that is great!

    However, it seems to remove the column sorting icons in the column headers. The sorting still works, but the little up/down triangle icon is not there. Do you perhaps have a way to bring that back?

    EDIT: actually, the column to column header alignment also seems to go off a bit??

    Many thanks


    Regards, Xander. My Blog

    • Edited by novascape Saturday, August 23, 2014 1:04 AM
    Saturday, August 23, 2014 12:58 AM
  • Hello, Xander.

    Confirm. For both issues do not have a fix yet.


    Sergey Vdovin

    Saturday, August 23, 2014 6:04 AM
  • Hi Sergey!

    I tried the following code:

    myapp.BrowseCustomers.Customers_postRender = function (element, contentItem) {
        // Write code here.
        setTimeout(function () {
            $("table", element).addClass("theadfixed");
        }, 100);
    
        fixTableHeader(element);
    };
    
    
    fixTableHeader = function (element) {
    
        var old_th = $(element).find("thead");
        var new_th = old_th.parent().clone(true);
        new_th.find("tbody").remove();
        new_th = new_th.wrap("<div class=\"msls-clear msls-presenter-content msls-font-style-normal msls-vauto msls-hscroll\"></div>").parent();
        old_th.remove();
        $(element).before(new_th);
    
    };

    And I got this:


    Am I doing something wrong? How to fix?

    Best regards,


    Ciro


    • Edited by Oric.CQ Tuesday, August 26, 2014 3:31 PM
    Tuesday, August 26, 2014 3:25 PM
  • Hey, Ciro.

    1.

     setTimeout(function () {
            $("table", element).addClass("theadfixed");
        }, 100);
    

    is not a part of my code.

    2. what is wrong at your snapshot?


    Sergey Vdovin

    Tuesday, August 26, 2014 3:29 PM
  • Hi, Sergey! Thanks to reply.

    If I remove the code

    setTimeout(function () {
            $("table", element).addClass("theadfixed");
        }, 100);

    The table header isn't more fixed:


    Ciro

    Tuesday, August 26, 2014 7:01 PM
  • Set the

    • Height

    property of the table to

    • Stretch to Container



    Sergey Vdovin

    Tuesday, August 26, 2014 7:20 PM
  • This is awesome!
    Friday, March 13, 2015 9:26 PM