Modals and supporting different screen sizes

Registered by Cédric Soulas

Modals ( are great for simple dialog prompt.

Today, forms like "launch instance" are also used in a modal. The number of items to display for such form makes the modal really big. In several cases, it doesn't fit in the screen size. And in all cases, we could use the available space around the modal to inline inputs, display more elements and avoid scrolling (most of screens have horizontal ratio).

Below (whiteboard) a list of screenshots for the top 8 screen sizes to start discussing about concerns and improvements.

Blueprint information

David Lyle
Cédric Soulas
Needs approval
Series goal:
Accepted for icehouse
Milestone target:
milestone icon 2014.1
Started by
Cédric Soulas
Completed by
David Lyle

Related branches



[soulascedric 2013-10-21]
According to sources [1], top 8 screen resolutions are:
#1 1366x768
#2 1024x768
#3 1280x800
#4 1920x1080
#5 1280x1024
- 768x1024, 1440x900 and 1600x900

As you can see on Horizon screenshots [1], the "launch instance" modal doesn't fit the screen for sizes #1, #2 and #3. In the other cases we could use the available space around the modal to display more elements: see Launch Instance UX Enhancement blueprint [2].


[gabrielpettier 2013-12-17]
Video demo of partial implementation (fullscreen + responsive)

[lblanchard 2013-12-20]
Gabriel, this looks great, nice work on this!! Currently it looks like the size of the form vs. the text on the right is different in different tabs. Is this something that will be tackled when the content is worked on in the other blueprint? Thanks very much for this work!

[gabrielpettier 2013-12-23]
Thanks for the feedback and encouragements! Indeed the columns are not using the same ratio in the video, i'll make all of them use the 8/4 ratio (currently the penultimate panel doesn't follow that). Work in other blueprints may influence content, but the flexibility brought by this one will be used at this point.

[david-lyle 2014-1-22] moving to i-3

[gabrielpettier 2014-03-13]
fullscreen attribute for modal has been merged by


Work Items

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.