• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

New Here ,
Jun 11, 2020 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

247

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
community guidelines
Community Expert ,
Jun 12, 2020 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

Votes

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
community guidelines
New Here ,
Jun 17, 2020 Jun 17, 2020

Copy link to clipboard

Copied

LATEST

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!

Votes

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
community guidelines
Community Expert ,
Jun 12, 2020 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. 

Votes

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
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp