2

I'm a Shiny newbie, so probably mine is a simple question but can't find anybody else asking something similar here on stackoverflow.com. I would need to build an app with more than 12 columns. So my question is, how can I have more than 12 textInput elements on the same row and make their width a little bit tighter? This is my sample code.

library(shiny) 
u <- fluidPage(   
  titlePanel("Simple Selectable Reactive Function"),   
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h2("Results"),
      fluidRow(column(1,
                      textInput("input_ID", label = "text 1",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 2",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 3",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 4",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 5",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 6",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 7",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 8",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 9",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 10",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 11",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text Inp 12",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text Inp 13",
                                value = "123"))

      )
    )
  )
)

s <- function(input,output){} 
shinyApp(ui=u,server=s)

thank you for the help.

Angelo
  • 1,594
  • 5
  • 17
  • 50
  • 1
    Shiny layout functions are built on top of [Bootstrap](https://getbootstrap.com/) which is where the 12 column row idea originates. You can have more than 12 column elements in a row, but the elements **will wrap** onto the row below. See this [SO post](https://stackoverflow.com/questions/26679160/bootstrap-3-use-more-than-12-columns-in-a-row) for more info. – Nate May 01 '19 at 15:01
  • I see. Is there a way to change this default and have tigher columns or use a different code instead of "column"? I've seen a solution here https://stackoverflow.com/questions/48500357/verbatimtextoutput-width-based-on-px where a person was showing how to use style, but to be honest I don't know how I could apply it in my case. – Angelo May 01 '19 at 15:21
  • I don't know how to accomplish that. The main idea of Bootstrap is viewing device flexibility. Elements are sized relative to the device and re-distributed accordingly so they are easily visible, eg 2-cols in 1-row on a monitor would be 6-cols in 2-rows on an ipad and then 3-cols in 4-rows on mobile – Nate May 01 '19 at 15:37
  • You don't need to use `fluidRow`s: you can just make the columns manually with `div` and CSS. That'll be a pain in the butt, but it's an option if you need it. – divibisan May 01 '19 at 16:55

1 Answers1

4

You could use a fluidRow in a columnagain. The last column is devided again in two columns. 

library(shiny) 
u <- fluidPage(   
  titlePanel("Simple Selectable Reactive Function"),   
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h2("Results"),
      fluidRow(
              column(1,
                      textInput("input_ID", label = "text 1",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 2",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 3",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 4",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 5",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 6",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 7",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 8",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 9",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 10",
                                value = "123")),
               column(1,
                      textInput("input_ID", label = "text 11",
                                value = "123")),

               column(1, fluidRow(column(6,
                                         textInput("input_ID", label = "text 12",
                                                   value = "123")),
                                  column(6,
                                         textInput("input_ID", label = "text 13",
                                                   value = "123"))))

      )
    )
  )
)

s <- function(input,output){} 
shinyApp(ui=u,server=s)
wati
  • 310
  • 2
  • 11