Make table headers "Sticky" about interactivehtmlbom HOT 4 OPEN

Making it sticky significantly reduces usable space for the table data on smaller screens like tablets/phones.

You can temporarily remove checkbox column when you don't need it to reduce confusion, it will not lose the checkbox data if you add it back later. Also you can use mark when checked feature to highlight checked column for specific checkbox.

If someone comes up with a way to make the stickiness adaptive to screen size without a lot of code or third party libs I can include it.

from interactivehtmlbom.

No need to edit the html which you will have to do again after plugin update. Use customization instead, create user.css in web directory with following contents:

#bomhead {
    position: sticky;
    top: 0px;
    z-index: 1;
}

from interactivehtmlbom.

As a crude workaround I've edited two lines in html file:
change <thead id="bomhead"> to <thead id="bomhead" style="position: sticky; top: 0px; z-index: 1;">.

You can also add it to <div style="100%;"> container with reflookup input few lines before, just make sure to then offset <thead> to about top: 60px;.

from interactivehtmlbom.

No need to edit the html which you will have to do again after plugin update. Use customization instead, create user.css in web directory with following contents:

#bomhead {
    position: sticky;
    top: 0px;
    z-index: 1;
}

Thanks, for sure a cleaner solution.

Or even stick reflookup's parent <div> with :

div:has(#reflookup) {  
   position: sticky;  
   top: 0px;  
   z-index: 1;  
}

This will stick search inputs and table headers.

from interactivehtmlbom.