Search code examples
rshiny

Horizontal f7Radio in shinyMobile

In shinyMobile the element f7Radio() is a column with the label on top and the choices beneath. Is there a way to make it a row, with the label to the left and all the choices in the same row?

I've tried all kind of stuff but nothing works so far.

Solution

  • You mean like this? If you have choices with titles in a row, make sure, that there is enough space. I added text-overflow: clip; to make the choice titles linebreak. It would be great, if you could add a "to be"-mockup to your question :)

    out

    library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "Update radio",
    tags$head(tags$style("
      .horizontal-radio {
        display: flex;
        justify-content: center;
        # flex-wrap: wrap; # I added this because I thought it's cleaner to wrap the #Choose a Feedback# to the top
        gap: 20px;
        flex-direction: row; // makes the choice label #Choose a Feedback# appear left
      }
      .list.chevron-center ul {
        display: flex;
        flex-direction: row; # makes the ul elements of the list align in a row
        gap: 2px; # decreased so that there is more space
      }
      
      .list.chevron-center li {
        display: inline-block;
        width: auto;
      }
      .horizontal-radio .item-inner {
        display: flex;
        flex-direction: row !important;
      }
      .horizontal-radio .item-title {
        margin-right: 2px;
      }
      .block-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip; # line-break text in choices
      }
      .list.chevron-center .item-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip; # line-break text in choices
      }
    ")),
    f7SingleLayout(
      navbar = f7Navbar(title = "Update f7Radio"),
      f7Block(
        div(class = "horizontal-radio",
            f7Radio(
              inputId = "radio",
              label = "Choose a Feedback",
              choices = c("Damn, that's a great answer, such wow.", "Hmm, nice, very nice.", "Best answer, EVER."),
              selected = "Best answer, EVER.",
              position = "right"
            )
        ),
        textOutput("res")
      ),
    )
  ),
  server = function(input, output, session) {
    output$res <- renderText(input$radio)
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app