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.
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)
Related
I'm trying to reduce the margin between two elements on this shiny app. When open in a browser, the whitespace between the two is huge.
I tried setting the css by adding style = "margin:0px; padding:0px" to the UI, but it did not help. I also tried messing with the inline = TRUE settings, also no help.
ui <- fluidPage(
fluidRow(
column(width = 3,
htmlOutput("select1", inline = TRUE, style = "margin:0px; padding:0px")
),
column(width = 3,
htmlOutput("select2", inline = TRUE, style = "margin:0px; padding:0px")
),
column(width = 6)
)
)
server <- function(input, output, session) {
output$select1 <- renderUI({
pickerInput(
inputId = "select1",
label = "LETTERS",
#choices = sort(unique(inventory$SubDivision)),
choices = LETTERS,
options = list(
"actions-box" = TRUE,
size = 10,
`live-search`=TRUE
),
multiple = TRUE
)
})
output$select2 <- renderUI({
pickerInput(
inputId = "select2",
label = "letters",
#choices = sort(unique(inventory$SubDivision)),
choices = letters,
options = list(
"actions-box" = TRUE,
size = 10,
`live-search`=TRUE
),
multiple = TRUE
)
})
}
shinyApp(ui, server)
Whitespace in browser:
The issue here is not the margin or padding, but the limit of the width to 300px. To allow the control to grow to full size of the column, you can change the global style :
ui <- fluidPage(
fluidRow(
tags$head(
tags$style(HTML("
.shiny-input-container:not(.shiny-input-container-inline) {
width:100%;
}"))
),
column(width = 3,
htmlOutput("select1", inline = TRUE)
),
column(width = 3,
htmlOutput("select2", inline = TRUE)
),
column(width = 6)
)
)
I'm trying to get two selectInputs to appear side by side in an absolute panel in a Shiny App. I tried the solution here, specifically using:
withTags(div(class='row-fluid',
div(class='span3', checkboxInput(inputId =
"simOption", label = "Historical Data",value=TRUE)),
div(class='span5', checkboxInput(inputId =
"simOption2", label = "Historical Data 2",value=TRUE))
))
but that didn't work in my code (the checkboxInputs still appeared vertically).
See the below code for a specific example. Right now, the two selectInputs appear vertically while I'm hoping to get them side-by-side.
library(shiny)
ui <- fluidPage(
navbarPage("Title", id="nav",
tabPanel("Tab",
div(class="outer",
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
width = 300, height = "auto",
selectInput("select_1", "1st Thing",
choices=1:10, selected = 1, multiple = FALSE,
width=90),
selectInput("select_2", "2nd Thing",
choices=1:10, selected = 2, multiple = FALSE,
width=90)
)
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
You could wrap your two input selectors in a div and add some css.
library(shiny)
ui <- fluidPage(
navbarPage("Title", id="nav",
tabPanel("Tab",
div(class="outer",
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
width = 300, height = "auto",
div(style="display:flex",
selectInput("select_1", "1st Thing",
choices=1:10, selected = 1, multiple = FALSE,
width=90),
selectInput("select_2", "2nd Thing",
choices=1:10, selected = 2, multiple = FALSE,
width=90)
)
)
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
I started learning shiny recently and I am toying around with wellPanels. I am trying to create a wellPanel which will be no larger than necessary to fit its contents. I've managed to get the following:
but have not found a way to eliminate the right-hand side extra space of the wellPanel. If possible, I would also like to place the "X" button on the top right corner of the wellPanel. Is there a way to do these? Thanks in advance!
Here is the working code:
library(shiny)
ui <- fluidPage(
fluidRow(column(width = 6,
wellPanel(
fluidRow(
column(width = 3, textInput(inputId = "layer", label = "Layer name", placeholder = "Layer name")),
column(width = 3, numericInput(inputId = "att_point", label = "Attachment Point", value = 100)),
column(width = 3, numericInput(inputId = "capacity", label = "Capacity", value = 100)),
column(width = 3, actionButton(inputId = "rm_btn", label = "", icon = icon("times")))
)))))
shinyApp(ui, function(input,output){})
You need to adjust the widths something like this:
library(shiny)
ui <- fluidPage(
fluidRow(column(width = 6,
wellPanel(
fluidRow(
column(width = 4, textInput(inputId = "layer", label = "Layer name", placeholder = "Layer name")),
column(width = 4, numericInput(inputId = "att_point", label = "Attachment Point", value = 100)),
column(width = 3, numericInput(inputId = "capacity", label = "Capacity", value = 100)),
column(width = 1, actionButton(inputId = "rm_btn", label = "", icon = icon("times")))
)))))
shinyApp(ui, function(input,output){})
With this you get an output which looks like this:
Hope it helps!
ui <- dashboardPage(
dashboardHeader(title = "Sales"),
dashboardSidebar(),
dashboardBody(
tags$style(HTML(".box-header{background:#d2d2d2; color:#d83000; text-align:center;}")),
shinyUI(fluidPage(
fluidRow(
box(fluidRow(column(width = 12,
valueBox(1000,"Total Sales", width = 2),
valueBox(500,"Existing Sales", width = 2),
valueBox(300,"New Sales", width = 2),
valueBox(100,"Lost Sales", width = 2),
valueBox(100,"Unclassified Sales", width = 2))),
fluidRow(column(width=12, offset = 2,valueBox(250, "within existing sales", width = 2))),
width = 12, title = tags$b("BUSINESS MODEL"), solidHeader = TRUE)
)#,
#box(title = "Title", height = 20, width = 8, solidHeader = TRUE)
))))
# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {
})
# Run the application
shinyApp(ui = ui, server = server)
Result
As you can see the "within existing sales" valuebox is not in align with "existing sales" valuebox. I tried offsetting with as 3.5 but it does not work. I even tried inspecting the result but I not much of a programmer.
The second row is not aligned because you are adding a offset of 2 to a column with a width of 12. On Bootstrap, you can not use more than 12 column in a row.
To solve that you should use a column-based layout, using a column for each valueBox and setting width = NULL. The follow example is using to separate rows, but you can also use only one row.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Sales"),
dashboardSidebar(),
dashboardBody(
tags$style(HTML(".box-header{background:#d2d2d2; color:#d83000; text-align:center;}")),
shinyUI(fluidPage(
fluidRow(
box( width = 12, title = tags$b("BUSINESS MODEL"), solidHeader = TRUE,
fluidRow(
column(width = 2, valueBox(1000,"Total Sales", width = NULL)),
column(width = 2, valueBox(500,"Existing Sales", width = NULL)),
column(width = 2, valueBox(300,"New Sales", width = NULL)),
column(width = 2, valueBox(100,"Lost Sales", width = NULL)),
column(width = 2, valueBox(100,"Unclassified Sales", width = NULL))
),
fluidRow(
column(width = 2, offset = 2,
valueBox(250, "within existing sales", width = NULL)
)
)
)
)#,
#box(title = "Title", height = 20, width = 8, solidHeader = TRUE)
))))
# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {
})
# Run the application
shinyApp(ui = ui, server = server)
I have a top banner that I want to split into two separate sections representing two different inputs. To do this, I've created a fluidRow and with two columns, one for each input. However, as it is now there is a little bit of white space between the columns, despite putting offset = 0. Is there any way to remove this white space so that the columns are immediately next to one another?
colors = c("green","blue","red")
library(shiny)
ui <- fluidPage(
tabsetPanel(
tabPanel("Info",
fluidRow(
column(width = 6, offset = 0,
div(style = "height:50px;width:100%;background-color: #999999;border-style: solid;border-color: #000000",
tags$h3("Section 1")
)
),
column(width = 6, offset = 0,
div(style = "height:50px;width:100%;background-color: #999999;border-style: solid;border-color: #000000",
tags$h3("Section 2")
)
)
),
fluidRow(
column(width = 6, offset = 0,
div(style = "height:50px;width:100%;background-color: #999999;border-style: solid;border-color: #000000",
selectInput(inputId = "color",label = "color:",
choices = colors,
selected = colors[2],
multiple = FALSE)
)
),
column(width = 6, offset = 0,
div(style = "height:50px;width:100%;background-color: #999999;border-style: solid;border-color: #000000",
selectInput(inputId = "points",label = "Number of Points:",
choices = c("30","60","90"),
selected = "10",
multiple = FALSE) )
)
),
br(),
br(),
fluidRow(
actionButton(inputId = "go",
label = "Update"
)
),
fluidRow(
plotOutput("plot", width = "100%")
)
)
)
)
server <- function(input, output,session) {
data = eventReactive(input$go, {
var1 = rnorm(isolate(as.numeric(input$points)),5)
cat1 = c(rep("red",length(var1)/3),rep("blue",length(var1)/3),rep("green",length(var1)/3))
data = cbind.data.frame(var1,cat1)
plotdata = data[which(data$cat1 ==isolate(input$color)),]
}
)
output$plot = renderPlot({
plotdata = data()
plotcol = isolate(input$color)
plot(plotdata$var1, col = plotcol)
})
}
shinyApp(ui = ui,server = server)
The white space is the padding of the column div. To remove that, use
column(width = 6, offset = 0, style='padding:0px;', ...)