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)
Related
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)
I want to color the title panel of my app, including the margins.
So far I am able to color the panel.
So basically I want all margins of the title panel to be in the color coral.
ui <- fluidPage(
titlePanel(h1("Hello Shiny!",style={'background-color:coral;'})
)
,
sidebarLayout(
sidebarPanel(
sliderInput(inputId = "bins",
label = "Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
plotOutput(outputId = "distPlot")
)
)
)
server <- function(input, output) {
output$distPlot <- renderPlot({
x <- faithful$waiting
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = "#75AADB", border = "white",
xlab = "Waiting time to next eruption (in mins)",
main = "Histogram of waiting times")
})
}
shinyApp(ui, server)
If you look at your page with a browser's developper tools (e.g. ctrl+shift+i in chrome), you'll see your title panel is in a big container-fluid div with 15px padding left and right.
You cannot color the padding of that page only around the title.
However, you can take the title out of the fluid page so that it is not impacted by the padding. This means your title will be flush with the left border of your page. You may want to introduce some left padding, for example 15px.
ui <- tagList(
titlePanel(h1("Hello Shiny!",
style='background-color:coral;
padding-left: 15px')),
fluidPage(
sidebarLayout(
sidebarPanel(
sliderInput(inputId = "bins",
label = "Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
plotOutput(outputId = "distPlot")
)
)
))
Alternatively, a pure CSS solution is to negate the fluid page margin and replace it by padding from the title, effectively extending the title box by 15px left and right to compensate for the page padding.
ui <- fluidPage(
titlePanel(h1("Hello Shiny!",
style={'background-color:coral;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;'})
),
sidebarLayout(
sidebarPanel(
sliderInput(inputId = "bins",
label = "Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
plotOutput(outputId = "distPlot")
)
)
)
Same result with different underlying page structures:
Option 1 puts the title before the main app's page (which has the 15px padding).
Option 2 keeps the title inside the main page but makes it bleed it out left and right by 15px (the size of the page padding).
Now this makes for some ugly code. You also break the tab title by using an h1 tag in the titlePanel.
Better to write your own titlePanel.
The original code is:
function (title, windowTitle = title)
{
tagList(tags$head(tags$title(windowTitle)), h2(title))
}
Replace with:
myTitlePanel <- function (title, windowTitle = title, color = "coral") {
css <- paste(paste0("background-color:", color),
"padding-left: 15px",
"margin-left: -15px",
"margin-right: -15px",
sep = ";")
tagList(tags$head(tags$title(windowTitle)),
h1(title, style = css))
}
Then your UI becomes:
ui <- fluidPage(
myTitlePanel("Hello Shiny!", color = "coral"),
sidebarLayout(
sidebarPanel(
sliderInput(inputId = "bins",
label = "Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
plotOutput(outputId = "distPlot")
)
)
)
Much cleaner and making it easy to change background color.
I wanna have a plot with dynamic size and all should happen in the shinyUI.
Here is my code:
shinyUI{
sidebarPanel(
sliderInput("width", "Plot Width", min = 10, max = 20, value = 15),
sliderInput("height", "Plot Height", min = 10, max = 20, value = 15)
)
mainPanel(
plotOutput("plot", width="15cm", height="15cm")
)
}
I set "15cm" only to see the plot.
I tried different methods to take the data from the sliderInputs and bring it to the plotOutput. I tried "input.height", "input$heigt" but nothing worked.
You must use the inputs in the server side, for example here is one solution :
And the unit of the width and height must be a valid CSS unit, i'm not sure that "cm" is valid, use "%" or "px" (or an int, it will be coerced to a string with "px" at the end)
library(shiny)
runApp(list(
ui = pageWithSidebar(
headerPanel("Test"),
sidebarPanel(
sliderInput("width", "Plot Width (%)", min = 0, max = 100, value = 100),
sliderInput("height", "Plot Height (px)", min = 0, max = 400, value = 400)
),
mainPanel(
uiOutput("plot.ui")
)
),
server = function(input, output, session) {
output$plot.ui <- renderUI({
plotOutput("plot", width = paste0(input$width, "%"), height = input$height)
})
output$plot <- renderPlot({
plot(1:10)
})
}
))
I've come across some open issues when looking for a way to make a vertical slider in R Shiny apps, to put next to one of my plots so that the user can "move a horizontal line" in the plot with a slider that follows the same range as the plot's y axis.
I managed to make the slider turn vertical, but it still wants the mouse to be dragged horizontal. Anyone a clue how to attack this with css to rotate the drag action?
library(shiny)
ui <- fluidPage(
fluidRow(
column(3,
sliderInput(inputId = 'myslider1', label = 'Change vertical', min = -5, max = 6.3, step = 0.1, value = -6)
),
column(3,
sliderInput(inputId = 'myslider2', label = 'Change horizontal', min = -5, max = 6.3, step = 0.1, value = 0)
), style = "margin-top:200px"
),
tags$style(HTML(".js-irs-0 { transform: rotateZ(270deg)}")),
tags$style(HTML(".js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {background: yellow}"))
)
server <- function(input, output, session) {
}
shinyApp(ui = ui, server = server)
There is this function noUiSliderInput() from the shinyWidgets package that does what you need.
See example below:
if (interactive()) {
### examples ----
# see ?demoNoUiSlider
demoNoUiSlider("more")
### basic usage ----
library( shiny )
library( shinyWidgets )
ui <- fluidPage(
tags$br(),
noUiSliderInput(
inputId = "noui1",
min = 0, max = 100,
value = 20
),
verbatimTextOutput(outputId = "res1"),
tags$br(),
noUiSliderInput(
inputId = "noui2", label = "Slider vertical:",
min = 0, max = 1000, step = 50,
value = c(100, 400), margin = 100,
orientation = "vertical",
width = "100px", height = "300px"
),
verbatimTextOutput(outputId = "res2")
)
server <- function(input, output, session) {
output$res1 <- renderPrint(input$noui1)
output$res2 <- renderPrint(input$noui2)
}
shinyApp(ui, server)
}
This is the problem I am trying to solve. My navbarpage overlaps other elements from below. Is there any way to put the navbarpage in the background? Or perhaps make the daterange input show it's calendar below its input box?
The documentation mentions using fixed-top or fixed-bottom for the posotion argument will cause the navbar to overlay your body content, unless you add padding.
Adding padding does not solve the problem though.
Here is a reproducible example -
ui <- fluidPage(
fluidRow(class = 'headerrow', column(width = 12, style = "font-size: 30pt; line-height: 8vh; text-align:left; color:#FFFFFF; width = 100", tags$strong('Test')), tags$head(tags$style('.headerrow{height:8vh; background-color:#267dff}'))),
navbarPage(
'Navbar',
tabPanel(
'Menu1',
sidebarPanel(
selectInput('drink', 'Choose your poison', choices = c('Bloody Mary', 'Sex on the beach'), selected = 'Bloody Mary'),
dateRangeInput('period', 'Date range', start = '2016-05-01', end = '2017-04-01',
min = '2013-07-01', max = '2017-06-01', startview = 'year', format = 'mm/yyyy'),
width = 2
),
mainPanel(width = 10)
),
tabPanel('Menu2'),
tabPanel('Menu3'),
tabPanel('Menu4')
)
)
server <- function(input, output){
}
shinyApp(ui, server)
Thank you so much!
Try adding z-index to the div: tags$style(HTML(".datepicker {z-index:99999 !important;}"))
library(shiny)
ui <- fluidPage(
fluidRow(class = 'headerrow', column(width = 12, style = "font-size: 30pt; line-height: 8vh; text-align:left; color:#FFFFFF; width = 100", tags$strong('Test')), tags$head(tags$style('.headerrow{height:8vh; background-color:#267dff}'))),
navbarPage(
'Navbar',
tabPanel(
'Menu1',
tags$style(HTML(".datepicker {z-index:99999 !important;}")),
sidebarPanel(
selectInput('drink', 'Choose your poison', choices = c('Bloody Mary', 'Sex on the beach'), selected = 'Bloody Mary'),
dateRangeInput('period', 'Date range', start = '2016-05-01', end = '2017-04-01',
min = '2013-07-01', max = '2017-06-01', startview = 'year', format = 'mm/yyyy'),
width = 2
),
mainPanel(width = 10)
),
tabPanel('Menu2'),
tabPanel('Menu3'),
tabPanel('Menu4')
)
)
server <- function(input, output){}
shinyApp(ui, server)