portal.hdfgroup.org - design is broken

[webcompat-bot]

URL: https://portal.hdfgroup.org/display/HDF5/H5P_SET_ELINK_PREFIX

Browser / Version: Safari 13.1 Operating System: Mac OS X 10.15.4 Tested Another Browser: No

Problem type: Design is broken Description: Items not fully visible Steps to Reproduce: Toc fills entire screen page, cotnents not visible or accessible

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

@ksy36 Could you take a look at this please since an iPad is required? I could not reproduce it on my iOS device.

[ksy36]

I think this report is for Safari on desktop, I can reproduce on my Mac. The content is shifted to the right and off the screen. The problem is only happening in Safari on desktop (and in all browsers on an iPad), lets move to needsdiagnosis.

[karlcow]

This is the way the content is organized. and somehow the display: table-* properties throw off the layout. For example, removing the display: table-row shows the content, in an imperfect way but slightly more readable.

The content seems to have been pushed off-screen like @ksy36 mentioned.

<div class="brikit-content-layer-table">
  <!--
    .brikit-content-layers .brikit-content-layer-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    }
    -->
  <div class="brikit-content-layer-table-row designable-element">
    <!--
     .brikit-content-layers .brikit-content-layer-table-row {
    position: relative;
    display: table-row;
    }
    -->

    <div
      class="brikit-content-column brikit-content-column-normal designable-element rm_pagetree_col mobile-hide"
      id="content-column-1195578110"
      data-content-column="1195578110"
      style="width: 20%; height: false"
    >
    <!-- 
    THIS IS THE LEFT COLUMN 

    .brikit-content-column {
    display: table-cell;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: top;
    }
    -->
    </div>
    <div
      class="brikit-content-column brikit-content-column-normal designable-element hdf-rm-main-column brikit-content-column-main"
      id="content-column-1195548673"
      data-content-column="1195548673"
      style="width: 80%; height: false"
    >
    <!-- 
    THIS IS THE RIGHT COLUMN 

    .brikit-content-column {
    display: table-cell;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: top;
    }
    -->
    </div>
  </div>
</div>