Highlighted

Frameless output: floating table column headers with postion: sticky don't work

New Here ,
Jun 11, 2020

Copy link to clipboard

Copied

Hello,

 

I have several tables where I've used CSS selectors to apply position: sticky to the table cells in the first row of that table. This is a a fairly standard method to create floating column header for long tables where context may be lost. This method works as expected in Responsive HTML 5 output.

 

However, position: sticky does not work as expected when used with the Frameless output type. I suspect this has something to do with the DIVs in the Frameless output, specifically .RH-LAYOUT-TOOLBAR-toolbar-box, which also has position: sticky.

 

Is there some known workaround to potentially allow floating table headers to work? I've already tried a few JS-based solutions (such as floatThead), but the Frameless output also interacts with those in odd ways.

 

Thank you in advance!

Topics

Output presets

Views

120

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Frameless output: floating table column headers with postion: sticky don't work

New Here ,
Jun 11, 2020

Copy link to clipboard

Copied

Hello,

 

I have several tables where I've used CSS selectors to apply position: sticky to the table cells in the first row of that table. This is a a fairly standard method to create floating column header for long tables where context may be lost. This method works as expected in Responsive HTML 5 output.

 

However, position: sticky does not work as expected when used with the Frameless output type. I suspect this has something to do with the DIVs in the Frameless output, specifically .RH-LAYOUT-TOOLBAR-toolbar-box, which also has position: sticky.

 

Is there some known workaround to potentially allow floating table headers to work? I've already tried a few JS-based solutions (such as floatThead), but the Frameless output also interacts with those in odd ways.

 

Thank you in advance!

Topics

Output presets

Views

121

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jun 12, 2020

Copy link to clipboard

Copied

If I'm reading this right, I *think* it's because other containers have an overflow value other than "visible" specified on them. If that's the problem, I don't think there's an easy css fix we can do (Adobe might be able to work something out).

 

A JS dev might be able to work out how to isolate the JS solution so it works with Frameless output.

https://github.com/w3c/csswg-drafts/issues/865

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jun 17, 2020

Copy link to clipboard

Copied

Thank you for the response. 

I tried setting all overflow values in layout.css and userstyle.css to "visible", but that did not affect the sticky table header. I can get two sticky containers working in a standalone file, but not the Frameless output. 

 

It seems that the best solution here is to submit a bug report/feature request to Adobe and see if they can add this in an upcoming release. 

 

Thanks again!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 12, 2020

Copy link to clipboard

Copied

Oh and I did a little stand alone proof of concept with two sticky containers and they "stuck" correctly. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...