iFrame is locking column heading


iFrame with sizing set to a fixed size locks column heading when using horizontal scrollbar.

Steps to Reproduce

  1. Navigate to a base system CMS page that has an embedded iframe content block.
    For example, https://<instance>/service-now.com/ess/order_status.do).
  2. To display all the records in the list, click All in the filter.
  3. A horizontal scrollbar should appear at the bottom of list. If it does not appear, click the gear and personalize the list to add 10 fields and expand the columns.
  4. To see the column header and the horizontal scrollbar, you may need to click the menu icon and switch to Show 10 rows per page.
  5. Scroll back and forth.
    Notie that the columns and the header move in sync. This is expected behavior.
  6. Navigate to Content Management > Content > Pages.
  7. Filter on [url suffix] [is] [order_status].
    Alterntaively, go to /content_page_list.do?sysparm_query=GOTOurl_suffix%3Dorder_status%5Econtent_site%3D5767a89fc0a8016b012f6aecb0c816a4.
  8. Navigate to Related Links > Edit Page.
  9. In the My Orders iFrame, click the pencil icon.
  10. Switch the sizing from Expand to fit content to Fixed size.
  11. Set the following:
    • Height: 600
    • Width: 1150

  12. Save and relaunch the page (same as page in step 1).
  13. Click All in the filter to display records in the list.
    You should now see a verticial scrollbar displayed.
  14. Scroll vertically to the bottom.
    You should now see a horizontal scrollbar. If not, click the gear and personalize the list to add 10 columns.
  15. Scoll back and forth.
    Note that the columns and the header do not move in sync. This is unexpected behavior.
  16. Mouse click within the list and click the arrow key to go right.
    A second horizontal scrollbar renders at the bottom.


Ensure that the iFrame sizing is set to Expand to fit (internal content only).

Related Problem: PRB634342