13 KiB
Window Sizes
Guidelines on choosing the correct size when creating a dialog or a popup
Follow these guidelines to select the correct size when creating a dialog or a popup for IntelliJ-based products.
For simple cases use default sizes. When they don't work well, set minimum sizes for components.
Default sizes
Dialog
There are four recommended window sizes for dialogs: small, medium, large, and extra large. Select the size depending on the amount of content to keep the important information visible.
{width="706"}
A dialog can't be made smaller than the default size.
Small
Size: 350×250 px.
Best for: several components that are stacked vertically.
{width="706"}
Medium
Size: 500×350 px
Best for:
- Multiple components with short labels that are divided into two columns.
- A full-width table with two or three columns.
- A full-width code snippet or input with long text.
For example, the Evaluate Expressions dialog has an input field with long text and a tree with code stacked vertically:
{width="706"}
Large
Size: 750×525 px
Best for:
- A full-width table with four or more columns.
- A master-detail layout.
- Two-column layout with a code snippet or an input field with long text in any of the columns.
- Two code snippets or input fields with long texts in a row.
- Two-column layout with an image or a video in any of the columns. In this case, the image or the video takes the most space.
For example, the Run/Debug Configuration dialog has a master-detail layout with a tree in the first column and the list of controls with long texts in the second column:
{width="706"}
Extra Large
Size: 1000×700 px
Best for:
- Two-column layout with code snippets or input fields with long texts in both columns.
- Three-or-more-column layout regardless of the content.
For example, the Settings dialog that has three or more columns on multiple pages:
{width="706"}
Maximum width and height
Set the dialog's maximum dimensions to match screen size to prevent resizing beyond screen bounds.
Popup
Popups should have the same default width as dialogs. In addition, there is an extra small size for popups – 200 px wide when the content is narrow.
A popup can't be made smaller than the default size.
Action Popups
If a popup has a vertical list of actions or options, set a default width to either extra small (200 px) or small (350 px).
The width and height are adaptable based on the content if it exceeds the set dimensions.
|
Extra small 
|
Small 
|
Content-rich Popups
If a popup has several sections and features long texts, set a default width to medium (500 px) or large (750 px).
Height is adaptable based on the content. If a popup has a scrollable content, set the default height respectively: medium (350 px) or large (525 px).
|
Medium 
|
|
Large 
|
When the default width doesn't work, set minimum sizes for components.
Maximum width and height
Set maximum width and height to 80% of a screen size. Use a scrollbar if a popup's content doesn't fit within the set dimensions.
Tool windows
Default sizes:
- Vertical tool windows should take minimum 20% of the application width but not less than 200×500 px.
- Horizontal tool windows should take minimum 20% of the application height but not less than 500×200 px.
The default sizes should be set for all the states of the View Mode.
A tool window can't be made smaller than the default size.
For example, the vertical Project tool window and the horizontal Build tool window with minimum sizes in Window mode:
{width="706"}
Minimum sizes for components
When the default sizes are either too big or too small for a window, or the window has a complex layout, add minimum sizes to content inside the window. This will make the content displayed correctly and reduce any potential issues caused by resizing the window.
How to set the size correctly
- Select how the content is displayed.
- What type of content is used.
- Select the biggest size out of the two to add the minimum size to a component.
How the content is displayed
|
Table cell Width: min 65 px Height for the whole table: min 120 px Follow guidelines for table sizes |
|
Tree Width: min 250 px |
|
Text area Width: min 270 px, max 600 px Height: min 55 px Follow guidelines for text area sizes |
|
Diagram A container with horizontal and vertical insets with 100 px |
Types of content
|
Class/test/file name Width: min 250 px |
|
URL/Path/FQN for class Width: min 350 px |
|
Class/test/file name + URL/Path/FQN for class Width: min 400 px |
|
Code snippet or editor Width: min 400 px Height (when multiple lines): min 120 px |
|
Paragraph or long text Width: min 300 px Height (when multiple lines): min 120 px |
Example 1
The Rename Inheritors dialog has a table with FQNs. Add 350 px as the minimum width for a table column. This will make the dialog wider than the default Medium size (500 px) but will show more of FQNs.
Correct
|
Acceptable
|
Example 2
Settings dialog has the default extra large size 1000 px. In the Code Style settings for Java set 400 px as the minimum width of the code editor. This will make the dialog wider but will show more code
Correct
|
Acceptable
|
Example 3
Instead of setting a default size for a diagram popup, for example, small (350×250 px), add horizontal and vertical 100 px insets inside the Diagram popup, and make the width and height adaptive to its content. This will help small diagrams be more noticeable and make a diagram popup of any size easier to read.
Correct
|
Acceptable
|
Empty state
Some components, for example, tables, can have an empty state when there is no content. In this case, the minimum size of a component in both empty and filled states is defined by its filled state.
For example, the size of the Custom Plugin Repository dialog is defined by the minimum size of the table that contains URLs (minimum 350 px wide), and not by the size of the smaller empty state:
Correct
|
Incorrect
|