Aligning action button next to input box in ui.R shiny

shiny
1

I would like to add an action button just next to the input box so that the user can click it and get extra information about what value to provide in the input box. here's an example code (This code puts the action button in the next line).
How should I align the action button just next to box? Any help would be appreciated!

library(shiny)

if (interactive()) {
  
  library(shinyBS)
  
  
  
  ui <- fluidPage(
    
    sidebarLayout(
      sidebarPanel(
        div(style="display:inline-block;vertical-align:top;",
            textInput("name", label = "Enter the name to print", value = ""), 
            bsButton("q1", label = "click for more info", icon = icon("question"), style = "info", size = "extra-small")
        ),
        bsPopover(id = "q1", title = "data",
                  content = "more info",
                  placement = "right", 
                  trigger = "click",  options = NULL)
      ),
      
      verbatimTextOutput ("text")
      
    )
  )
  server <- function(input, output,session) {
    
    output$text <- renderPrint({
      i <-  input$name
      i
    })
    
    
  }
  
  shinyApp (ui, server)
}
2

Hi nan,

Try the following:

library(shiny)

if (interactive()) {
  
  library(shinyBS)
  
  
  
  ui <- fluidPage(
    
    sidebarLayout(
      sidebarPanel(
        div(style="display:inline-block;vertical-align:top;",
            fluidRow(
              column(4,
                     br(),
                     bsButton("q1", label = "click for more info", icon = icon("question"), style = "info", size = "extra-small")),
              column(8, 
                     textInput("name", label = "Enter the name to print", value = ""))
              
            )),
        bsPopover(id = "q1", title = "data",
                  content = "more info",
                  placement = "right", 
                  trigger = "click",  options = NULL)
      ),
      
      verbatimTextOutput ("text")
      
    )
  )
  server <- function(input, output,session) {
    
    output$text <- renderPrint({
      i <-  input$name
      i
    })
    
    
  }
  
  shinyApp (ui, server)
}

Created on 2018-09-22 by the reprex package (v0.2.0).

It yields:

Untitled
Untitled1892×137 2.45 KB

Hope this helps!

3 Likes
3

hi @kmprioli

Your code works perfectly. I tried to put the action button on the right side of input box, but didn't happen. Do you think you could help? Here's my code for input file:

library(shiny)
if (interactive()) {
  library(shinyBS)

  
  
  ui <- fluidPage(
    
    sidebarLayout(
      sidebarPanel(

        div(style="display:inline-block;vertical-align:top;",
            fluidRow(
              column(4,
                     br(),
                     bsButton("q1", label = "click for more info", icon = icon("question"), style = "info", size = "extra-small")),
              column(8, 
                     fileInput("file", "Upload File *", accept = ".txt"))
              
            )),
        bsPopover(id = "q1", title = "data",
                  content = "more info",
                  placement = "right", 
                  trigger = "click",  options = NULL)
        ),
      verbatimTextOutput ("text")
      
    )
  )


  
  
  
  server <- function(input, output,session) ({     })
    

  
  
  shinyApp (ui, server)
}
4

You can also use the splitLayout function

library(shiny)
if (interactive()) {
  library(shinyBS)

    ui <- fluidPage(
    
    sidebarLayout(
      sidebarPanel(
        tags$style(HTML('#q1 {margin-top: 30px}')),
         splitLayout(cellWidths = c("60%", "40%"), 
            textInput("name", label = "Enter the name", value = ""), 
            bsButton("q1", label = "click me", icon = icon("question"), style = "info", size = "extra-small")
        ),
        bsPopover(id = "q1", title = "data",
                  content = "more info",
                  placement = "right", 
                  trigger = "click",  options = NULL)
      ),
      
      verbatimTextOutput ("text")
      
    )
  )
  server <- function(input, output,session) {
    
    output$text <- renderPrint({
      i <-  input$name
      i
    })
 
    
  }
  
  shinyApp (ui, server)
  }
4 Likes