# Dialog and Popup 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 for [dialogs](Dialog-and-popup-sizes.md#default-sizes) and [popups](Dialog-and-popup-sizes.md#popup). When default sizes don't work well, set [minimum sizes for components](Dialog-and-popup-sizes.md#minimum-sizes-for-components). ## Default sizes ### Dialog There are four recommended window sizes for dialogs: **extra small**, **small**, **medium**, and **large**. Select the size depending on the amount of content to keep the important information visible. ![A preview of recommended window sizes for dialogs](dialog_popup_sizes.png){width="706"} When setting the default size for your dialog, it should be impossible to make it smaller. #### Extra small Size: 350×250 px. Best for: several components that are stacked vertically. ![The Rename dialog with two input fields, two checkboxes, and actions in the dialog footer. The components are stacked vertically in one column](dialog_popup_sizes_extra_small.png){width="706"} #### Small 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 editor or snippet. For example, the Evaluate Expressions dialog has two code snippets that are stacked vertically: ![The Evaluate Expressions dialog that has two code snippets stacked vertically](dialog_popup_sizes_small.png){width="706"} #### Medium Size: 750×525 px Best for: * A full-width table with four or more columns. * 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. * Two-column layout with a code snippet or an input field with long text in any of the columns. * Two code editors or snippets in a row. For example, the Run/Debug Configuration dialog has a two-column layout with a tree in the first column and the list of controls with long texts in the second column: ![The Run/Debug Configuration dialog that has a two-column layout. There is a nvigation in the first column and the list of settings in the second column](dialog_popup_sizes_medium.png){width="706"} #### Large Size: 1000×700 px Best for: * Two-column layout with long names, code editor, code snippet. * Three-or-more-column layout regardless of the content. For example, Code Style settings for Java in the Settings dialog. The dialog has three columns with a table and a code snippet in different columns: ![The Code Style settings in the Settings dialog. The dialog has three columns with a table and a code snippet in different columns](dialog_popup_sizes_large.png){width="706"} ### Popup #### Minimum width Popups should have the same default width as dialogs. In addition, there is a smaller size for popups – 200 px wide, when the content is narrow.

Insert

Quick Fixes

Documentation

Search Everywhere

#### Minimum height Unlike dialogs, popups have an adaptive height. Adapt the height of a popup to the amount of content inside. For example, the height of the Documentation popup is different depending on what is focused in the editor: The Documentation popup adapts its height based on the content inside

#### Maximum width and height The maximum width and height shouldn't exceed 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 20% of the application width but not less than 200×500 px. * Horizontal tool windows should take 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.

Vertical Project tool window:

Horizontal Build tool window:

### Editor tabs Place your content into a tab in the editor when there are three or more columns in a row with code that needs to be shown. For example, the Merge functionality features a list of changes with actions in a tool window and two code editors with line numbers: ![The Merge functionality with a list of changes with actions in a tool window on the left and two code editors with line numbers in the editor tab on the right](dialog_popup_sizes_editor.png){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 important 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 1. Select how the content is displayed:

	Table cell Width: min 65 px Height for the whole table: min 120 px Follow guidelines for table width
	Tree Width: min 250 px
	Text area Width: min 270 px, max 600 px Height: min 55 px For size and placement follow the text area guidelines
	Diagram A container with horizontal and vertical insets with 100 px

2. What type of content is used:

	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
	Standalone text Width: min 300 px Height (when multiple lines): min 120 px

3. Select the biggest size out of the two to add the minimum size to a component #### 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 recommended 500 px but will show more of FQNs.

Correct

Acceptable The Rename Inheritors dialog has the Medium size as default

#### Example 2 Settings dialog has the default 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 Add horizontal and vertical 100 px insets inside the Diagram popup to make it adaptable to the different amounts of content inside.

Correct

Acceptable

## Empty state Some components, for example, tables, can have an [empty state](empty_state.md) 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