CODEWITHSUNDEEP
rshiny
det
det

Reputation: 5232

fluidRow with multiple columns

How to align widgets in fluidRow without huge gaps. Take for example this code:

library(shiny)

ui <- bootstrapPage(
    
    absolutePanel(
        
        id = "pn", top = 5, right = 5, class = "panel panel-default", 
        
        fluidRow(
            column(width = 3, selectInput("place_format", NULL, choices = character(0))),
            column(width = 7, selectizeInput("place", NULL, choices = character(0))),
            column(width = 2, actionButton("zoom","Zoom!"))
        )
    )
)

server <- function(input, output){}

shinyApp(ui = ui, server = server)

if all width aren't4 there is 'huge' gap between button and 2nd widget. And also after button there is a 'lot' of free space.

Upvotes: 0

Views: 1446

Answers (1)

ismirsehregal
ismirsehregal

Reputation: 33560

The definition of your absolutePanel is incomplete. Please see the details section in ?absolutePanel

The position (top, left, right, bottom) and size (width, height) parameters are all optional, but you should specify exactly two of top, bottom, and height and exactly two of left, right, and width for predictable results.

Please check the following example:

library(shiny)

ui <- bootstrapPage(

  absolutePanel(
    id = "pn", top = "100px", left = "100px", right = "100px", bottom = "100px", class = "panel panel-default",
    fluidRow(
      column(width = 3, selectInput("place_format", NULL, choices = character(0), width = "100%")),
      column(width = 7, selectizeInput("place", NULL, choices = character(0), width = "100%")),
      column(width = 2, actionButton("zoom","Zoom!", width = "100%"))
    )
  )
)

server <- function(input, output){}

shinyApp(ui = ui, server = server)

Upvotes: 3

Related Questions