openmct icon indicating copy to clipboard operation
openmct copied to clipboard

Published 20 hours ago • verified publisher icon nasa

Overflow, alignment and padding in text and button elements causing problems

Open charlesh88 opened this issue 11 months ago • 1 comments

Problem

Many users trying to make the best use of available pixel real estate are using Condition Widgets and Hyperlinks at a very small size. When the widget is sized below the requirements of content and padding, scrollbars appear. They are additionally mixing these elements with text drawing objects in Display Layouts. Text is also not aligned the same between Condition Widgets, Hyperlinks (both links and buttons) and Display Layout text drawing objects. Hyperlink links don't expand to fill their containers when their frames are hidden, but should. This is visually undesirable and hampers the construction of efficient and aligned displays.

Screenshot 2024-03-01 at 5 10 17 PM

Solution

Normalize padding, alignment and overflow handling for widgets, Hyperlinks and text drawing objects.

Screenshot 2024-03-01 at 5 10 36 PM

Steps to Reproduce

  1. Make a Condition Widget and Hyperlinks, both link and button types.
  2. Make a SWG if needed for a telemetry source.
  3. Add all items to a Display Layout with a grid with a small Y dimension, something 10, 3.
  4. Add a text drawing object to the layout.
  5. Size elements such that their height is a little more than their text's height. Observe: scrollbars in the widget and Hyperlink link should be visible.
  6. Align non-button elements such that their left edges are aligned. Note that their text does not all align along a vertical axis.

Environment

  • Open MCT Version: 4.0.0
  • Deployment Type: any
  • OS: all
  • Browser: legion

Impact Check List

  • [ ] Data loss or misrepresented data?
  • [x] Regression? Did this used to work or has it always been broken?
  • [ ] Is there a workaround available?
  • [x] Does this impact a critical component?
  • [x] Is this just a visual bug with no functional impact?
  • [ ] Does this block the execution of e2e tests?
  • [ ] Does this have an impact on Performance?

Additional Information

charlesh88 avatar Mar 01 '24 22:03 charlesh88

Testing Notes

JSON import file here that provides the needed elements, in a Display Layout: Open MCT Text and Button Overflow and Padding.json.zip

  1. Import the attached Display Layout.
  2. Browse to the layout.
  3. Verify that if looks like the image below:

Screenshot 2024-03-01 at 5 10 36 PM

charlesh88 avatar Mar 02 '24 01:03 charlesh88