# Overflow Utilities for controlling how content is handled when it exceeds its container\'s boundaries. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-overflow--introduction ## Variants documented in Storybook - OverflowShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-overflow--overflowshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Overflow. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Overflow Utilities Reference

A complete reference of all overflow utility classes for controlling container clipping and scrolling.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Global Overflow

Format: ux4g-overflow-{value}

Auto ux4g-o-auto
Hidden ux4g-o-hidden
Visible ux4g-o-visible
Scroll ux4g-o-scroll

Overflow X

Format: ux4g-overflow-{value}

Auto ux4g-o-x-auto
Hidden ux4g-o-x-hidden
Visible ux4g-o-x-visible
Scroll ux4g-o-x-scroll

Overflow Y

Format: ux4g-overflow-{value}

Auto ux4g-o-y-auto
Hidden ux4g-o-y-hidden
Visible ux4g-o-y-visible
Scroll ux4g-o-y-scroll
``` React: ```jsx import React from 'react'; const OverflowExample1Demo = () => ( <>
Utilities

Overflow Utilities Reference

A complete reference of all overflow utility classes for controlling container clipping and scrolling.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Global Overflow */}

Global Overflow

Format: ux4g-overflow-{value}

Auto ux4g-o-auto
Hidden ux4g-o-hidden
Visible ux4g-o-visible
Scroll ux4g-o-scroll
{/* Overflow X */}

Overflow X

Format: ux4g-overflow-{value}

Auto ux4g-o-x-auto
Hidden ux4g-o-x-hidden
Visible ux4g-o-x-visible
Scroll ux4g-o-x-scroll
{/* Overflow Y */}

Overflow Y

Format: ux4g-overflow-{value}

Auto ux4g-o-y-auto
Hidden ux4g-o-y-hidden
Visible ux4g-o-y-visible
Scroll ux4g-o-y-scroll
); export default OverflowExample1Demo; ``` Angular: ```html
Utilities

Overflow Utilities Reference

A complete reference of all overflow utility classes for controlling container clipping and scrolling.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Global Overflow

Format: ux4g-overflow-{value}

Auto ux4g-o-auto
Hidden ux4g-o-hidden
Visible ux4g-o-visible
Scroll ux4g-o-scroll

Overflow X

Format: ux4g-overflow-{value}

Auto ux4g-o-x-auto
Hidden ux4g-o-x-hidden
Visible ux4g-o-x-visible
Scroll ux4g-o-x-scroll

Overflow Y

Format: ux4g-overflow-{value}

Auto ux4g-o-y-auto
Hidden ux4g-o-y-hidden
Visible ux4g-o-y-visible
Scroll ux4g-o-y-scroll
``` ### 2. Overflow Showcase — Overflow Auto HTML: ```html
This container has ux4g-o-auto . Scrollbars will appear only if this content exceeds the bounding box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sapien vitae erat.
``` React: ```jsx import React from 'react'; const OverflowExample2Demo = () => ( <>
This container has ux4g-o-auto . Scrollbars will appear only if this content exceeds the bounding box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sapien vitae erat.
); export default OverflowExample2Demo; ``` Angular: ```html
This container has ux4g-o-auto . Scrollbars will appear only if this content exceeds the bounding box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sapien vitae erat.
``` ### 3. Overflow Showcase — Overflow Hidden HTML: ```html
This container has ux4g-o-hidden . Any content that exceeds the 100px height is clipped and not accessible via scroll.
``` React: ```jsx import React from 'react'; const OverflowExample3Demo = () => ( <>
This container has ux4g-o-hidden . Any content that exceeds the 100px height is clipped and not accessible via scroll.
); export default OverflowExample3Demo; ``` Angular: ```html
This container has ux4g-o-hidden . Any content that exceeds the 100px height is clipped and not accessible via scroll.
``` ### 4. Overflow Showcase — Overflow Visible HTML: ```html
This container has ux4g-o-visible . Notice how the blue area spills out of the gray bounding box.
``` React: ```jsx import React from 'react'; const OverflowExample4Demo = () => ( <>
This container has ux4g-o-visible . Notice how the blue area spills out of the gray bounding box.
); export default OverflowExample4Demo; ``` Angular: ```html
This container has ux4g-o-visible . Notice how the blue area spills out of the gray bounding box.
``` ### 5. Overflow Showcase — Overflow Scroll HTML: ```html
This container has ux4g-o-scroll . Scrollbars stay visible even if they aren't strictly needed for the content.
``` React: ```jsx import React from 'react'; const OverflowExample5Demo = () => ( <>
This container has ux4g-o-scroll . Scrollbars stay visible even if they aren't strictly needed for the content.
); export default OverflowExample5Demo; ``` Angular: ```html
This container has ux4g-o-scroll . Scrollbars stay visible even if they aren't strictly needed for the content.
``` ### 6. Overflow Showcase — Horizontal Overflow HTML: ```html
...
...
...
``` React: ```jsx import React from 'react'; const OverflowExample6Demo = () => ( <>
...
...
...
); export default OverflowExample6Demo; ``` Angular: ```html
...
...
...
``` ### 7. Overflow Showcase — Vertical Overflow HTML: ```html
...
...
...
``` React: ```jsx import React from 'react'; const OverflowExample7Demo = () => ( <>
...
...
...
); export default OverflowExample7Demo; ``` Angular: ```html
...
...
...
``` ## CSS class reference The following CSS partials define the Overflow utility classes used in the examples above: ### overflow.utilities.css ```css /* Base Engine */ [class*="ux4g-o-"] { overflow: var(--ux4g-of); } [class*="ux4g-o-x-"] { overflow-x: var(--ux4g-ofx); } [class*="ux4g-o-y-"] { overflow-y: var(--ux4g-ofy); } /* ===== Overflow Utilities ===== */ .ux4g-o-auto { --ux4g-of: var(--ux4g-of-auto); } .ux4g-o-hidden { --ux4g-of: var(--ux4g-of-hidden); } .ux4g-o-visible { --ux4g-of: var(--ux4g-of-visible); } .ux4g-o-scroll { --ux4g-of: var(--ux4g-of-scroll); } /* ===== Overflow X Utilities ===== */ .ux4g-o-x-auto { --ux4g-ofx: var(--ux4g-ofx-auto); } .ux4g-o-x-hidden { --ux4g-ofx: var(--ux4g-ofx-hidden); } .ux4g-o-x-visible { --ux4g-ofx: var(--ux4g-ofx-visible); } .ux4g-o-x-scroll { --ux4g-ofx: var(--ux4g-ofx-scroll); } /* ===== Overflow Y Utilities ===== */ .ux4g-o-y-auto { --ux4g-ofy: var(--ux4g-ofy-auto); } .ux4g-o-y-hidden { --ux4g-ofy: var(--ux4g-ofy-hidden); } .ux4g-o-y-visible { --ux4g-ofy: var(--ux4g-ofy-visible); } .ux4g-o-y-scroll { --ux4g-ofy: var(--ux4g-ofy-scroll); } /* ========================================================= Base Overflow Engine (DRY) ========================================================= */ .ux4g-o-auto, .ux4g-o-scroll, .ux4g-o-y-auto, .ux4g-o-y-scroll, .ux4g-o-x-auto, .ux4g-o-x-scroll { scrollbar-width: thin; scrollbar-color: var(--ux4g-scroll-thumb) var(--ux4g-scroll-track); } /* WebKit Browsers (Chrome, Edge, Safari) */ .ux4g-o-auto::-webkit-scrollbar, .ux4g-o-scroll::-webkit-scrollbar, .ux4g-o-y-auto::-webkit-scrollbar, .ux4g-o-y-scroll::-webkit-scrollbar, .ux4g-o-x-auto::-webkit-scrollbar, .ux4g-o-x-scroll::-webkit-scrollbar { width: var(--ux4g-scroll-size); height: var(--ux4g-scroll-size); } .ux4g-o-auto::-webkit-scrollbar-track, .ux4g-o-scroll::-webkit-scrollbar-track, .ux4g-o-y-auto::-webkit-scrollbar-track, .ux4g-o-y-scroll::-webkit-scrollbar-track, .ux4g-o-x-auto::-webkit-scrollbar-track, .ux4g-o-x-scroll::-webkit-scrollbar-track { background: var(--ux4g-scroll-track); border-radius: var(--ux4g-scroll-radius); } .ux4g-o-auto::-webkit-scrollbar-thumb, .ux4g-o-scroll::-webkit-scrollbar-thumb, .ux4g-o-y-auto::-webkit-scrollbar-thumb, .ux4g-o-y-scroll::-webkit-scrollbar-thumb, .ux4g-o-x-auto::-webkit-scrollbar-thumb, .ux4g-o-x-scroll::-webkit-scrollbar-thumb { background-color: var(--ux4g-scroll-thumb); border-radius: var(--ux4g-scroll-radius); border: 2px solid transparent; background-clip: content-box; } .ux4g-o-auto::-webkit-scrollbar-thumb:hover, .ux4g-o-scroll::-webkit-scrollbar-thumb:hover, .ux4g-o-y-auto::-webkit-scrollbar-thumb:hover, .ux4g-o-y-scroll::-webkit-scrollbar-thumb:hover, .ux4g-o-x-auto::-webkit-scrollbar-thumb:hover, .ux4g-o-x-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--ux4g-color-neutral-400, --ux4g-color-neutral-400); } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.