Uploaded image for project: 'OpenOLAT'
  1. OpenOLAT
  2. OO-2142

Checkbox positions don't move when scrolling "rights"-table

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed (View Workflow)
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 10.4.11
    • Fix Version/s: 10.5.5
    • Component/s: None
    • Labels:
      None

      Description

      How to reproduce:

      • Login as coach and open a course
      • navigate to tools / Members Management / Rights
      • Make your window size small so that the table does not fit completely on the screen and horizontal scrollbars appear
      • use the scrollbars to scroll horizontally

      Expected Result

      • the table moves together with its content (the checkboxes)

      Actual Result:

      • the table (e.g. column headers) moves, but the content (checkboxes) stay at their position. Only when resizing the window, the positions are being corrected and the checkboxes jump to the correct position.

      The attached screenshot shows an example where the checkboxes even have been moved over the text.

      Browser used: Firefox 47.0 under Ubuntu Linux
      This might also involve a browser bug.

      Reason of the bug:
      The checkbox input elements are positioned absolutely in CSS for no obvious reason:

      .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]
      {
      margin-left: -20px;
      position: absolute;
      }

      This is from the themes.css of the VCRP OLAT installation, but I checked the default "openolat" theme in hg and it includes a similar rule:

      src/main/webapp/static/themes/openolat/theme.css @ 6897:cb72b7c8b04c

      .radio input[type="radio"],
      .radio-inline input[type="radio"],
      .checkbox input[type="checkbox"],
      .checkbox-inline input[type="checkbox"] {
      position: absolute;
      margin-left: -20px;
      margin-top: 4px \9
      }

      This is from the current development version, so I'd expect that the bug is in all latest versions that use the openolat theme or a theme based on it.

      Removing the position:absolute in the CSS makes the checkboxes behave normally. This fix also changes the vertical position slightly, but this can be corrected easily by adding some margin-top.

      It might be that this fix causes problems in another context where the absolute positioning is required. As a general rule, I would think that inside of a tabel cell (td), no absolute positioning should be applied on the checkboxes.

        Attachments

          Activity

            People

            • Assignee:
              srosse Stéphane Rossé
              Reporter:
              crazy4chrissi Christopher K.
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 15 minutes
                15m