Control size of f7Button() within f7Sheet()

[moldach]

I would like to have the following look to the application:

f7Card(
              title = "Add some 🧙✨ {magick}",
              image = "https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1015&q=80",
              f7Segment(
                container = "row",
                f7Button("Add some {`magick`}", color = "blue", label = "Blur", fill = TRUE),
                f7Button("toggleSheet3", color = "green", label = "Implode", fill = TRUE),
                f7Button(color = "yellow", label = "My button", fill = TRUE)
              )
            )

However, when I add a popup f7Sheet()'s below a f7Button it greatly extends the size of each button putting each on its own row (not desired):

f7Card(
              title = "Add some 🧙✨ {magick}",
              image = "https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1015&q=80",
              f7Segment(
                container = "row",
                f7Button("Add some {`magick`}", color = "blue", label = "Blur", fill = TRUE),
                f7Sheet(
                  id = "sheet2",
                  label = "Blur",
                  orientation = "bottom",
                  rounded = TRUE,
                  size = "small",
                  swipeToClose = TRUE,
                  backdrop = TRUE,
                  f7Slider(
                    "blur",
                    "Blur:",
                    min = 0, max = 20,
                    value = 0,
                    step =1,
                    color = "pink"
                  )
                ),
                f7Button("toggleSheet3", color = "green", label = "Implode", fill = TRUE),
                f7Sheet(
                  id = "sheet3",
                  label = "Implode",
                  orientation = "bottom",
                  swipeToClose = TRUE,
                  backdrop = TRUE,
                  f7Slider(
                    "implode",
                    "Implode:",
                    min = -1, 
                    max = 1,
                    value = 0,
                    step = 0.1,
                    color = "pink"
                  )
                ),
                f7Button(color = "yellow", label = "My button", fill = TRUE)
              )
            )

Is there something I'm doing wrong? Is there a way to resize these buttons, and if not can you please add that feature, thanks.

[moldach]

Although I'm still not sure how to place buttons nicely above and object in an f7Card() with f7Segment(), I've found how I can place them nicely formatted inside footer() within the f7Card() instead:

        f7Tab(
          tabName = "Tab 3",
          icon = f7Icon("color_filter"),
          active = FALSE,
          f7Shadow(
            intensity = 10,
            hover = TRUE,
            f7Card(
              title = "Add some 🧙✨ {magick}",
              image = "https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1015&q=80",
              imageOutput("image_magick"),
              br(),
              footer = tagList(
                f7Button("toggleBlur", color = "pink", label = "Blur", fill = TRUE, rounded = TRUE, shadow = TRUE, size = "small"),
                f7Sheet(
                  id = "blurSheet",
                  label = "Blur",
                  orientation = "bottom",
                  rounded = TRUE,
                  size = "small",
                  swipeToClose = TRUE,
                  backdrop = TRUE,
                  f7Slider(
                    "blur",
                    "Blur:",
                    min = 0, max = 20,
                    value = 0,
                    step = 1,
                    color = "green"
                  )
                ),
                f7Button("toggleImplode", color = "blue", label = "Implode", fill = TRUE, rounded = TRUE, shadow = TRUE, size = "small"),
                f7Sheet(
                  id = "implodeSheet",
                  label = "Implode",
                  orientation = "bottom",
                  swipeToClose = TRUE,
                  backdrop = TRUE,
                  f7Slider(
                    "implode",
                    "Implode:",
                    min = -1, 
                    max = 1,
                    value = 0,
                    step = 0.1,
                    color = "green"
                  )
                ),
                f7Button("toggleRotate", color = "purple", label = "Rotate", fill = TRUE, rounded = TRUE, shadow = TRUE, size = "small"),
                f7Sheet(
                  id = "rotateSheet",
                  label = "Rotate",
                  orientation = "bottom",
                  swipeToClose = TRUE,
                  backdrop = TRUE,
                  f7Slider(
                    "rotation",
                    "Rotate:",
                    min = 0, 
                    max = 360,
                    value = 0,
                    step = 1,
                    color = "green"
                  )
                )
              )
            )
          )
        )

This give me good formatting and imageOuput().

However, when I try to move the footer() section above imageOutput() and rename it to header() I'm getting an error when imageOuput() is called:

Warning: Error in magick_image_implode: Expecting a single value: [extent=0].

I'd appreciate if someone has figured this out

[DivadNojnarg]

f7Sheet can be placed anywhere outside the segment and then programmatically toggled on the server side, like this:

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "Skeletons",
    f7SingleLayout(
      navbar = f7Navbar(title = "f7Skeleton"),
      f7Card(
        title = "Add some 🧙✨ {magick}",
        image = "https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1015&q=80",
        f7Segment(
          container = "row",
          f7Button("Add some {`magick`}", color = "blue", label = "Blur", fill = TRUE),
          f7Button("toggleSheet3", color = "green", label = "Implode", fill = TRUE),
          f7Button(color = "yellow", label = "My button", fill = TRUE)
        ),
        f7Sheet(
          id = "sheet2",
          label = "Blur",
          orientation = "bottom",
          rounded = TRUE,
          size = "small",
          swipeToClose = TRUE,
          backdrop = TRUE,
          f7Slider(
            "blur",
            "Blur:",
            min = 0, max = 20,
            value = 0,
            step =1,
            color = "pink"
          )
        ),
        f7Sheet(
          id = "sheet3",
          label = "Implode",
          orientation = "bottom",
          swipeToClose = TRUE,
          backdrop = TRUE,
          f7Slider(
            "implode",
            "Implode:",
            min = -1, 
            max = 1,
            value = 0,
            step = 0.1,
            color = "pink"
          )
        )
      )
    )
  ),
  server = function(input, output) {
    observeEvent(input$toggleSheet3, {
      updateF7Sheet("sheet3")
    })
  }
)