ui.panel_absolute

ui.panel_absolute(
    *args
    top=None
    left=None
    right=None
    bottom=None
    width=None
    height=None
    draggable=False
    fixed=False
    cursor='auto'
    **kwargs
)

Create a panel of absolutely positioned content.

Creates a <div> tag whose CSS position is set to absolute (or fixed if fixed = True). In HTML, absolute coordinates are specified relative to an element's nearest parent element whose position is not set to static (the default). If no such parent is found, the coordinates are relative to the page borders. If you're not sure what that means, just keep in mind that you may get strange results if you use this function from inside of certain types of panels.

Parameters

*args : TagChild | TagAttrs = (): UI elements to include inside the panel.
top : Optional[str] = None: Distance between the top of the panel and the top of the page or parent container.
left : Optional[str] = None: Distance between the left side of the panel and the left of the page or parent container.
right : Optional[str] = None: Distance between the right side of the panel and the right of the page or parent container.
bottom : Optional[str] = None: Distance between the bottom of the panel and the bottom of the page or parent container.
width : Optional[str] = None: Width of the panel.
height : Optional[str] = None: Height of the panel.
draggable : bool = False: If True, allows the user to move the panel by clicking and dragging.
fixed : bool = False: Positions the panel relative to the browser window and prevents it from being scrolled with the rest of the page.
cursor : Literal[‘auto’, ‘move’, ‘default’, ‘inherit’] = 'auto': The type of cursor that should appear when the user mouses over the panel. Use "move" for a north-east-south-west icon, "default" for the usual cursor arrow, or "inherit" for the usual cursor behavior (including changing to an I-beam when the cursor is over text). The default is "auto", which is equivalent to "move" if draggable else "inherit".
****kwargs** : TagAttrValue = {}: Attributes added to the content’s container tag.

Returns

: TagList: A UI element

Tip

The position (top, left, right, bottom) and size (width, height) parameters are all optional, but you should specify exactly two of top, bottom, and height and exactly two of left, right, and width for predictable results.

Like most other distance parameters in Shiny, the position and size parameters take a number (interpreted as pixels) or a valid CSS size string, such as "100px" (100 pixels) or "25%".

For arcane HTML reasons, to have the panel fill the page or parent, specify 0 for top, left, right, and bottom rather than the more obvious width = "100%" and height = "100%".

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny import App, Inputs, Outputs, Session, ui

app_ui = ui.page_fluid(
    ui.panel_title("A basic absolute panel example", "Demo"),
    ui.panel_absolute(
        ui.panel_well(
            "Drag me around!", ui.input_slider("n", "N", min=0, max=100, value=20)
        ),
        draggable=True,
        width="300px",
        right="50px",
        top="25%",
    ),
)


def server(input: Inputs, output: Outputs, session: Session):
    pass


app = App(app_ui, server)