Allow tags to intelligently fill their container

Create fill containers and items. If a fill item is a direct child of a fill container, and that container has an opinionated height, then the item is allowed to grow and shrink to its container's size.

bindFillRole(
  x,
  ...,
  item = FALSE,
  container = FALSE,
  overwrite = FALSE,
  .cssSelector = NULL
)

Arguments

x: a tag() object. Can also be a valid tagQuery() input if .cssSelector is specified.
...: currently unused.
item: whether or not to treat x as a fill item.
container: whether or not to treat x as a fill container. Note, this will set the CSS display property on the tag to flex which can change how its direct children are rendered. Thus, one should be careful not to mark a tag as a fill container when it needs to rely on other display behavior.
overwrite: whether or not to override previous calls to bindFillRole() (e.g., to remove the item/container role from a tag).
.cssSelector: A character string containing a CSS selector for targeting particular (inner) tag(s) of interest. For more details on what selector(s) are supported, see tagAppendAttributes().

Value

The original tag object (x) with additional attributes (and a htmlDependency()).

Examples


tagz <- div(
  id = "outer",
  style = css(
    height = "600px",
    border = "3px red solid"
  ),
  div(
    id = "inner",
    style = css(
      height = "400px",
      border = "3px blue solid"
    )
  )
)

# Inner doesn't fill outer
if (interactive()) browsable(tagz)

tagz <- bindFillRole(tagz, container = TRUE)
tagz <- bindFillRole(tagz, item = TRUE, .cssSelector = "#inner")

# Inner does fill outer
if (interactive()) browsable(tagz)