@ceed/ads 1.23.2 → 1.23.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -98,12 +98,16 @@ DialogFrame can be used without a Modal wrapper for embedding dialog-style layou
|
|
|
98
98
|
|
|
99
99
|
> ⚠️ **Important** ⚠️
|
|
100
100
|
>
|
|
101
|
-
> When using DialogFrame without Modal, the parent container **must**
|
|
102
|
-
>
|
|
103
|
-
>
|
|
101
|
+
> When using DialogFrame without Modal, the parent container **must** meet the following requirements:
|
|
102
|
+
>
|
|
103
|
+
> - `position: 'relative'` — DialogFrame uses absolute positioning internally
|
|
104
|
+
> - Explicit `width` and `height` — `height` must be an absolute value (e.g., `300`, `'400px'`), not a relative value like `%` or `auto`
|
|
105
|
+
>
|
|
106
|
+
> DialogFrame inherits its dimensions from `ModalDialog`, which normally receives sizing from the Modal overlay. Without these constraints, the component will not render with correct dimensions.
|
|
104
107
|
|
|
105
108
|
```tsx
|
|
106
109
|
<Box sx={{
|
|
110
|
+
position: 'relative',
|
|
107
111
|
width: 480,
|
|
108
112
|
height: 300
|
|
109
113
|
}}>
|
|
@@ -124,7 +128,7 @@ import { DialogFrame, Button, Box } from '@ceed/ads';
|
|
|
124
128
|
// Standalone usage requires explicit container dimensions
|
|
125
129
|
function EmbeddedDialog() {
|
|
126
130
|
return (
|
|
127
|
-
<Box sx={{ width: 480, height: 300 }}>
|
|
131
|
+
<Box sx={{ position: 'relative', width: 480, height: 300 }}>
|
|
128
132
|
<DialogFrame
|
|
129
133
|
title="Settings"
|
|
130
134
|
actions={
|
|
@@ -442,12 +442,16 @@ ModalFrame can be used without a Modal wrapper for embedding dialog-style layout
|
|
|
442
442
|
|
|
443
443
|
> ⚠️ **Important** ⚠️
|
|
444
444
|
>
|
|
445
|
-
> When using ModalFrame without Modal, the parent container **must**
|
|
446
|
-
>
|
|
447
|
-
>
|
|
445
|
+
> When using ModalFrame without Modal, the parent container **must** meet the following requirements:
|
|
446
|
+
>
|
|
447
|
+
> - `position: 'relative'` — ModalFrame uses absolute positioning internally
|
|
448
|
+
> - Explicit `width` and `height` — `height` must be an absolute value (e.g., `300`, `'400px'`), not a relative value like `%` or `auto`
|
|
449
|
+
>
|
|
450
|
+
> ModalFrame inherits its dimensions from `ModalDialog`, which normally receives sizing from the Modal overlay. Without these constraints, the component will not render with correct dimensions.
|
|
448
451
|
|
|
449
452
|
```tsx
|
|
450
453
|
<Box sx={{
|
|
454
|
+
position: 'relative',
|
|
451
455
|
width: 480,
|
|
452
456
|
height: 300
|
|
453
457
|
}}>
|