I am developing UI with following requirements:
- Its HTML dialog
- It can take maximum of 90% of height and width of screen
- Dialog is split into two rows (and single column only)
- First row to contains and image / video. Image and video must be fully visible. It is allowed to shrink to fit available space.
- Second row to contain buttons that take certain actions on image / video. There might be multiple rows of action buttons, scroll-able horizontally.
Challenges are:
It is height of whole content that decide width of image (keeping aspect ratio same). (height of dialog box – height of buttons panel)
Width of image must restrict width of buttons groups beneath and allow them to scroll horizontally.
Schematic of expected UI
I tried using flex and grids but could not get restrict to button panel.
I could not assign min-content to width as sometimes, button panel might be smaller.
Kindly help me realize above requirements or closest to it if not realizable 🙂
I am ok for using 3rd party JS libraries if needed. – First preference will be to CSS solution
Ulhas Pawar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.