View Overflow Behavior

It is essential for managing content that exceeds the dimensions of its containing view. For this purpose the library provides the "overflow" property. It allows us to control how overflowed content is handled, such as by clipping it, displaying scrollbars, or making it visible outside the container. This property is crucial for maintaining layout integrity and enhancing user experience in responsive designs, where content size may vary based on screen dimensions.

Internally property holds the integer value and accepts the following values.

Value Name Description
OverflowHidden "hidden" The overflow is clipped, and the rest of the content will be invisible
OverflowVisible "visible" The overflow is not clipped. The content renders outside the element's box
OverflowScroll "scroll" The overflow is clipped, and a scrollbar is added to see the rest of the content
OverflowAuto "auto" Similar to OverflowScroll, but it adds scrollbars when necessary

When setting the "overflow" property value from resource description file the name of the value is used.

RUI

ListLayout {
    width = 100%,
    padding = 1em,
    orientation = up-down,
    content = [
        TextView {
            width = 100%,
            padding = 1em,
            semantics = h1,
            text = "Covert mov files to a gif image",
        },
        TextView {
            width = 100%,
            padding = 1em,
            semantics = code,
            radius = 0.5em,
            background-color = #FFDEDEDE,
            white-space = nowrap,
            text-overflow = clip,
            overflow = auto,      // Add content scrollbars when necessary
            text = "$ ffmpeg -i movie.mov -vf \"fps=30,scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse\" image.gif",
        }
    ]
}

Go

view := rui.NewListLayout(session, rui.Params{
    rui.Width:       rui.Percent(100),
    rui.Padding:     rui.Em(1),
    rui.Orientation: rui.TopDownOrientation,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Width:     rui.Percent(100),
            rui.Padding:   rui.Em(1),
            rui.Semantics: rui.H1Semantics,
            rui.Text:      "Covert mov files to a gif image",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Width:           rui.Percent(100),
            rui.Padding:         rui.Em(1),
            rui.Semantics:       rui.CodeSemantics,
            rui.Radius:          rui.Em(0.5),
            rui.BackgroundColor: 0xFFDEDEDE,
            rui.WhiteSpace:      rui.WhiteSpaceNowrap,
            rui.TextOverflow:    rui.TextOverflowClip,
            rui.Overflow:        rui.OverflowAuto,     // Add content scrollbars when necessary
            rui.Text:            "$ ffmpeg -i movie.mov -vf \"fps=30,scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse\" image.gif",
        }),
    },
})

View overflow example

© Alxanosoft inc.