I have two columns in a shiny app, I want to vertically align them to the bottom of their columns. I've tried adding styles to the column and the fluid row which contains them with no success. How can I adjust the css of a column to achieve this?
Many thanks!
ui <-
fluidPage(
fluidRow(
column(width = 6,
numericInput(inputId = "id_1", label = "Id number 1", value = 1, min = 0, max = 2, step =0.05),
# style = "vertical-align: bottom"
),
column(width = 6,
checkboxGroupInput("icons", "Choose icons:",
choiceNames = list(icon("calendar"), icon("bed"), icon("cog"), icon("bug")),
choiceValues = list("calendar", "bed", "cog", "bug")
)),
# style = "vertical-align: bottom"
)
)
server <- function(input, output) { }
shinyApp(ui, server)
I don't know how to do that with the bootstrap columns. Here is a way using a flexbox:
css <- "
.bottom-aligned {
display: flex;
align-items: flex-end;
}
.bottom-aligned > div {
flex-grow: 1;
}
"
ui <- fluidPage(
tags$head(
tags$style(HTML(css))
),
fluidRow(
column(
width = 12,
div(
class = "bottom-aligned",
div(
numericInput(inputId = "id_1", label = "Id number 1", value = 1, min = 0, max = 2, step = 0.05)
),
div(
checkboxGroupInput("icons", "Choose icons:",
choiceNames = list(icon("calendar"), icon("bed"), icon("cog"), icon("bug")),
choiceValues = list("calendar", "bed", "cog", "bug")
)
)
)
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Related
The reproducible code below uses a fluidRow() to house several user selections using radio buttons. Works fine in this limited example of only 2 radio button groupings. But I need to fit more radio button groupings into this row, without any wrapping. To do this, I'd like to replace this combination of fluidRow()/column() with a horizontally scrollable, non-wrapping row that is not subject to the limitations of the 12-wide grid system currently used in this code.
Also, all objects viewed in the scrolling row need to be left aligned without "fluid" expansion. Currently, using this fluidRow()/column() combo, if the viewing pane is expanded, the 2 columns housing each radio button grouping also expanded which doesn't look good. They need to remain fixed width and stay to the left.
Is this possible?
I prefer sticking with this sidebar/main panel/tab panel/conditional panel layout as I find it very user friendly for navigating the type of data we work with.
The image at the bottom further explains.
Reproducible code:
library(dplyr)
library(DT)
library(shiny)
library(shinyWidgets)
ui <-
fluidPage(
titlePanel("Summary"),
sidebarLayout(
sidebarPanel(
selectInput("selectData", h5("Select data to view:"),
choices = list("Beta"),
selected = "Beta"),
),
mainPanel(
tabsetPanel(
tabPanel("Private data", value = 1,
conditionalPanel(condition = "input.selectData == 'Beta'",
fluidRow(div(style = "margin-top:15px"),
column(width = 6, offset = 0,
wellPanel(
radioButtons(inputId = 'group1',
label = NULL,
choiceNames = c('By period','By MOA'),
choiceValues = c('Period','MOA'),
selected = 'Period',
inline = TRUE
),
style = "padding-top: 12px; padding-bottom: 0px;"
)
),
column(width = 6, offset = 0,
wellPanel(
radioButtons(inputId = 'group2',
label = NULL,
choiceNames = c('Exclude CT','Include CT'),
choiceValues = c('Exclude','Include'),
selected = 'Exclude',
inline = TRUE
),
style = "padding-top: 12px; padding-bottom: 0px;"
)
)
),
DTOutput("plants")
)
),
id = "tabselected"
)
)
)
)
server <- function(input, output, session) {
output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}
shinyApp(ui, server)
How about using a carousel instead e.g. via shinyglide or slickR:
library(dplyr)
library(DT)
library(shiny)
library(shinyWidgets)
library(shinyglide)
ui <-
fluidPage(
titlePanel("Summary"),
sidebarLayout(
sidebarPanel(
selectInput("selectData", h5("Select data to view:"),
choices = list("Beta"),
selected = "Beta"),
),
mainPanel(
tabsetPanel(
tabPanel("Private data", value = 1,
conditionalPanel(condition = "input.selectData == 'Beta'",
fluidRow(div(style = "margin-top:15px"),
column(12, glide(
height = "25",
controls_position = "top",
screen(
p(strong("Group 1")),
wellPanel(
radioButtons(inputId = 'group1',
label = NULL,
choiceNames = c('By period','By MOA'),
choiceValues = c('Period','MOA'),
selected = 'Period',
inline = TRUE
),
style = "padding-top: 12px; padding-bottom: 0px;"
)
),
screen(
p(strong("Group 2")),
wellPanel(
radioButtons(inputId = 'group2',
label = NULL,
choiceNames = c('Exclude CT','Include CT'),
choiceValues = c('Exclude','Include'),
selected = 'Exclude',
inline = TRUE
),
style = "padding-top: 12px; padding-bottom: 0px;"
)
)
))
),
DTOutput("plants")
)
),
id = "tabselected"
)
)
)
)
server <- function(input, output, session) {
output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}
shinyApp(ui, server)
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 created a UI page with some buttons and have two problems with the checkboxInput buttons:
checkboxInput('comissions', label = "Comissions", width = "10%")
Changing the width = "X%" doesn't change anything, same for 'Xpx'.
I suspected this is due to fixed column width, but the X% change works for other buttons well.
Second issue is that the button looks like this:
I would like it to be centered and not be in left column.
Thank you for the help,
Here is a way to center the checkbox, but it requires width = "100%".
library(shiny)
ui <- basicPage(
fluidRow(
column(4,
sliderInput("costs", "Costs", min = 1, max = 10, value = 1)),
column(4, style = "text-align: center;",
checkboxInput("comissions", label = "Comissions", width = "100%")),
column(4,
sliderInput("periods", "Number of periods", min = 1, max = 10, value = 1))
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
I don't know what you expect to see by changing the width ?
EDIT
To control the white space around the checkbox input, and its vertical alignment:
library(shiny)
ui <- basicPage(
fluidRow(
column(12,
div(style = "display: inline-block;",
sliderInput("costs", "Costs", min = 1, max = 10, value = 1)
),
div(style = "display: inline-block; margin-left: 20px; margin-right: 20px; vertical-align: -20px;",
checkboxInput("comissions", label = "Comissions", width = "100%")
),
div(style = "display: inline-block;",
sliderInput("periods", "Number of periods", min = 1, max = 10, value = 1)
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Lets assume I have a very simple application that only has 8 inputs grouped in 2 Panels (4 inputs | 4 inputs - see picture bellow) and based on these, I plot a small plot (easy peasy).
The problem that I face is that I want to have the labels only for the first panel, and on the left of the textInput box.
e.g. (Please excuse my sloppy image editing!)
Any suggestion?
My MWE for Figure 1 output:
library(shiny)
ui<-shinyUI(fluidPage(
wellPanel(
tags$style(type="text/css", '#leftPanel { max-width:300px; float:left;}'),
id = "leftPanel",
textInput("Population1000", 'Population 1000',"15"),
textInput("Area1000",'Area 1000', "20"),
textInput("GNI1000", 'GNI 1000', "2314"),
textInput("GDP1000", "GDP 1000", "1000")
),
wellPanel(
tags$style(type="text/css", '#RightPanel { max-width:300px; float:left;}'),
id = "RightPanel",
textInput("Population2000", 'Population 2000',"15"),
textInput("Area2000",'Area 2000', "20"),
textInput("GNI2000", 'GNI 2000', "2314"),
textInput("GDP2000", "GDP 2000", "1000")
)
)
)
server<-shinyServer(function(input, output) {NULL})
shinyApp(ui,server)
Hi you can try to use Bootstrap's horizontal form, look at the code below, it create 3 columns of width 4 each. You can change width in class = "col-sm-4 control-label" for labels, and in width = 4 for inputs.
library("shiny")
ui <- fluidPage(
fluidRow(
column(
width = 4,
tags$form(
class="form-horizontal",
tags$div(
class="form-group",
tags$label(class = "col-sm-4 control-label", `for` = "Population1000", br(), "Population"),
column(width = 4, textInput(inputId = "Population1000", label = "Year 1000", value = "15")),
column(width = 4, textInput(inputId = "Population2000", label = "Year 2000", value = "15"))
),
tags$div(
class="form-group",
tags$label(class = "col-sm-4 control-label", `for` = "Area1000", "Area"),
column(width = 4, textInput(inputId = "Area1000", label = NULL, value = "20")),
column(width = 4, textInput(inputId = "Area2000", label = NULL, value = "20"))
),
"..."
)
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Result :
PS : you should not use same ids for inputs.
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;', ...)