widget between text?

47 views
Skip to first unread message

Ignacio Martinez

unread,
Jul 26, 2016, 9:05:12 AM7/26/16
to shiny-...@googlegroups.com
Hi Everyone,

I would like to write something like this on shiny:

Some text before a number [numericInput widget] some text right after the number.

Right now I have this:

library(shiny)
server <- function(input, output) {}

ui <- fluidPage(
  mainPanel(p("some text before the number",
              numericInput(inputId = "number", 
                           label = NULL, 
                           value = 5, min = 0, max = 10, step = 1, 
                           width = '50px'),
              "some text right after the number")
            )
)
shinyApp(ui = ui, server = server)

I'm getting 3 lines instead of 1. Any ideas about how to achieve what I want?

Thanks!

Esteban Morales

unread,
Jul 27, 2016, 6:24:21 AM7/27/16
to Shiny - Web Framework for R
A similar question was asked here:

And also here:


You use div attributes to position. The following will give you what you're looking for:
library(shiny)
server <- function(input, output) {}

ui <- fluidPage(
  mainPanel(
    tags$div(class = "className", id = "idName",
      "Text Before",
      tags$input(id = "number", type="number", value = "5", min = "1", max="100"),
      "Text After"))
  )
shinyApp(ui = ui, server = server)

ignacio martinez

unread,
Jul 29, 2016, 3:53:41 PM7/29/16
to Shiny - Web Framework for R
Thanks! Is there a way to change the width of the number box? i tried adding width = '50px' but it did not work

Dario Strbenac

unread,
Jul 31, 2016, 10:00:08 PM7/31/16
to Shiny - Web Framework for R
Why not simply


    tags$div(class = "className", id = "idName",
      "Text Before",
      numericInput("numberChooser", value = "5", min = "1", max="100", step = 1, width = "100px"),
      "Text After"))

?

Dario Strbenac

unread,
Jul 31, 2016, 10:00:33 PM7/31/16
to Shiny - Web Framework for R
Esteban used a plain HTML input box instead of a reactive Shiny component. You could write style = "width:50px", but I recommend not following Esteban's example and using numericInput instead.

ignacio martinez

unread,
Aug 1, 2016, 8:02:37 AM8/1/16
to Shiny - Web Framework for R
Thanks Dario. Esteban's version works:

library(shiny)
server <- function(input, output) {}

ui <- fluidPage(
  mainPanel(
    tags$div(class = "className", id = "idName",
             "Text Before",
             tags$input(id = "number", type="number", value = "5", min = "1", 
                        max="100", style = "width:40px"),
             "text After"))
)
shinyApp(ui = ui, server = server)

but your version produces 3 lines instead of 1:

library(shiny)
server <- function(input, output) {}

ui <- fluidPage(
  mainPanel(
    tags$div(class = "className", id = "idName",
             "Text Before",
             numericInput(label = NULL, inputId = "numberChooser", 
                          value = "5", min = "1", max="100",
                          step = 1, width = "40px"),
             "text After"))
)
shinyApp(ui = ui, server = server)

What am I doing wrong?

Thanks!

Esteban Morales

unread,
Aug 17, 2016, 12:38:49 AM8/17/16
to Shiny - Web Framework for R
Hi Dario,

Isn't the input box treated as a reactive Shiny component?

For example, I replaced the numericInput from this R Shiny example with an input box and the code is still reactive and seems to work the same way:

library(shiny)

ui <- fluidPage(
  h1("Example app"),
  sidebarLayout(
    sidebarPanel(
      #numericInput("nrows", "Number of rows", 10)
      tags$div(class = "className", id = "idName",
               "Number->",
               tags$input(id = "nrows", type="number", value = "10", min = "1", max="100"),
               "<-Number")
    ),
    mainPanel(
      plotOutput("plot"),
      tableOutput("table")
    )
  )
)

server <- function(input, output, session) {
  df <- reactive({
    head(cars, input$nrows)
  })
  
  output$plot <- renderPlot({
    plot(df())
  })
  
  output$table <- renderTable({
    df()
  })
}

shinyApp(ui, server)

Esteban Morales

unread,
Aug 17, 2016, 12:49:43 AM8/17/16
to Shiny - Web Framework for R
Hi Ignacio, 

numericInput still creates three lines because R Shiny Widgets create their own <div> tags with predefined style properties, one of which causes the widget to be on it's own line.

This code:
   tags$div(class = "className", id = "idName",
             "Text Before",
             numericInput(label = NULL, inputId = "numberChooser", 
                          value = "5", min = "1", max="100",
                          step = 1, width = "40px"),
             "text After"))

In HTML this would look something like:
<div class="className, id="idName"> Text Before <div id="numberChooser"> #numericInput Widget </div> Text after </div>

You'll notice the links to sample solutions I posted work with adjusting the style of the widget div.
Reply all
Reply to author
Forward
0 new messages