代码之家  ›  专栏  ›  技术社区  ›  www

如何在Shiny和Shinydashboard中自定义HTML文本和逐字输出之间的空间

  •  0
  • www  · 技术社区  · 6 年前

    这是我上一个问题的后续问题( How to change the width and height of verbatimTextOutput in Shiny and Shinydashboard ). 我想创造一个 verbatimTextOutput 看起来和 textInput . 下面是一个例子。

    strong 文本输入 . 有没有办法增加这行和erBaTimeTextOutput之间的空间 , making the appearance as the same as the 文本输入`?

    enter image description here

    代码

    # Load the packages
    library(shiny)
    library(shinydashboard)
    
    # User Interface
    ui <- dashboardPage(
      header = dashboardHeader(title = ""),
      sidebar = dashboardSidebar(
        sidebarMenu(
          menuItem(
            text = "Example",
            tabName = "tab1"
          )
        )
      ),
      body = dashboardBody(
        tabItems(
          tabItem(
            tabName = "tab1",
    
            tags$head(
              tags$style(
                HTML(
                  "
            .form-control {
                border-radius: 4px 4px 4px 4px;
            }
    
            #txt1_out {
            font-family:  'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
            font-size: 14px;
            width: 300px; 
            max-width: 100%;
            padding: 6px 12px; 
            white-space: pre-wrap;
            }
    
            "
                )
              ),
              tags$script("
                Shiny.addCustomMessageHandler('selectText', function(message) {
                  $('#txt2_out').prop('readonly', true);
                });
                ")
            ),
            column(
              width = 4,
              textInput(inputId = "txt1", label = "Text input no.1", value = "abcde12345"),
              strong("Text output no.1"),
              verbatimTextOutput(outputId = "txt1_out", placeholder = TRUE)
            )
          )
        )
      )
    )
    
    server <- function(input, output, session){
      output$txt1_out <- renderText({
        input$txt1
      })
    }
    
    # Run the app
    shinyApp(ui, server)
    
    0 回复  |  直到 6 年前
        1
  •  1
  •   Eli Berkow    6 年前

    您可以添加 margin-top: 7px; 致:

    #txt1_out {
    font-family:  'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 14px;
    width: 300px; 
    max-width: 100%;
    padding: 6px 12px; 
    white-space: pre-wrap;
    margin-top: 7px;
    }
    

    Text input no.1 使用Chrome DevTools:

    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 700;
    }
    

    我试着匹配 margin-bottom: 5px 但元素并不是完全相同的,所以我选择了7px。

    推荐文章