> ## Documentation Index > Fetch the complete documentation index at: https://docs.membrane.agency/llms.txt > Use this file to discover all available pages before exploring further. # Portal Boundary Most of floating components in `@membranehq/react`,\ like [Combobox](/docs/ways-to-use-membrane/sdk/react/combobox), use `Portal` to mount outside of the stacking context. If you are using a floating component on the default stacking context, no additional setup is required\ as the default portal boundary is the `` element. But for cases when you want to use a floating component within another floating component, the stacking context needs to be adjusted by bounding the portal area.\ This can be done with the `FloatingPortalBoundary` component. A common situation is a custom `Modal` rendered in a `Portal` with a [Combobox](/docs/ways-to-use-membrane/sdk/react/combobox) as part of [DataInput](/docs/ways-to-use-membrane/sdk/react/data-input). ```javascript theme={null} import { DataInput } from "@membranehq/react"; import { Modal } from './my-modal' const schema = {...} const variablesSchema = {...} export function ModalWithDataInput() { return ( Create record ) } ``` With this setup both `Modal` and `Combobox` are rendered over their respective `Portal` inside of the ``,\ resulting in two separate stacking contexts and `Modal` might appear above `Combobox`. Portal Boundary illustration

To fix this problem we should bound the `Combobox` portal with `Modal.Content`.\ Use `FloatingPortalBoundary` to wrap the content container. > Note: `FloatingPortalBoundary` should only have a single child because it attaches a `data-*` attribute to it,\ > which serves as an anchor for `Portal`. ```javascript theme={null} import { DataInput, FloatingPortalBoundary } from "@membranehq/react"; import { Modal } from './my-modal' const schema = {...} const variablesSchema = {...} export function ModalWithDataInput() { return ( Create record ) } ``` Now, as the content has its own boundary, the `Combobox` from `DataInput` is portalled into the correct stacking context. Portal Boundary illustration

## Props: `FloatingPortalBoundary`

Prop	Type	Description
`children`	`React.ReactElement`	Components Children. Accepts only single child.
`id`	`string \| undefined`	Custom ID for boundary container. If not passed - `useId` is used.