shinyMobile 中的水平 f7Radio

Question

在shinyMobile中，元素

f7Radio()

是一列，标签位于顶部，选项位于下方。有没有办法让它成为一行，标签在左边，所有选择都在同一行？

我已经尝试了各种方法，但到目前为止没有任何效果。

Answer 1

你是说这样吗？如果您的下摆是连续的，请确保有足够的空间放置选择标签。我添加了

text-overflow: clip;

来使选择标题换行。

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;
        gap: 20px;
        flex-direction: row; // I added this
      }
      .list.chevron-center ul {
        display: flex;
        flex-direction: row;
        gap: 20px;
      }
      
      .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: 15px;
      }
      .list.chevron-center .item-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
      }
    ")),
    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")
      ),
      # Rest of your code remains the same
    )
  ),
  server = function(input, output, session) {
    output$res <- renderText(input$radio)
  }
)

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