Barbajoe CSS

Dialogs

Native dialogs with predictable sizing, scrolling, validation, and focus.

Dialogs

Try the maintained item editor with Name, Notes, chips, disabled states, and long content.

Accessibility: Name each native dialog, choose initial focus deliberately, support Escape/cancellation and restore focus to the invoker or a logical fallback. APG dialog guidance.

Both dialogs start at the same viewport-relative top offset. Short content leaves the footer at the minimum-height bottom. Long content grows to the viewport cap, then only its body scrolls. Footer order is Reset, Cancel, Submit. Submit validates and closes; Cancel or clicking outside closes without validation; Reset restores initial values and stays open. Closing does not reset the form.

Short dialog

Clear the title to exercise native required-field validation.

Long dialog

Edit the values, then use Reset to restore them. Submit and Cancel close the dialog without making a network request.

Content-driven sizing

The dialog grows with its contents rather than reserving a fixed preferred height. Its minimum leaves space for a useful short form.

Viewport limits

The maximum is eighty percent of the visible viewport, with outer gutters retained on exceptionally short screens. The minimum shrinks when the viewport cannot accommodate it.

Scroll ownership

The header and footer remain visible while this body scrolls. Move through these fields with Tab or scroll with your pointer to review the whole form.

Keyboard and validation

Clear the required title and try Submit. Native validation keeps the dialog open. Cancel does not submit or validate the form. Escape also dismisses the native modal.

This is the end of the scrolling body. Footer actions remain independently accessible.

Content-fit dialogs with a close action

These examples keep the standard width and opt into compact padding, a content-fit minimum, and more vertical room. Full-width header and footer dividers meet the scrolling body. The close icon uses the background-only icon treatment and follows the same cancellation path as Cancel and Escape.

Content-fit short dialog

Content-fit long dialog

Scroll through this synthetic example. The header and actions stay in place while the body scrolls.

Section 1. Keep editing within the body while the close action and footer remain available. Longer content uses the available vertical room.

Section 2. Keep editing within the body while the close action and footer remain available. Longer content uses the available vertical room.

Section 3. Keep editing within the body while the close action and footer remain available. Longer content uses the available vertical room.

Section 4. Keep editing within the body while the close action and footer remain available. Longer content uses the available vertical room.

Section 5. Keep editing within the body while the close action and footer remain available. Longer content uses the available vertical room.

Section 6. Keep editing within the body while the close action and footer remain available. Longer content uses the available vertical room.

Section 7. Keep editing within the body while the close action and footer remain available. Longer content uses the available vertical room.

Section 8. Keep editing within the body while the close action and footer remain available. Longer content uses the available vertical room.

Full markup, options, and customization reference