I have a lot of generated input fields on an shiny app and I want to make it more dense by lowering the height of the dateinput fields. However, the height tag only shrinks the box and make it overflow into the next input. So, how do I shrink the dateInput() fields so it is only a little higher than the text?
library(shiny)
ui <- fluidPage(
tags$style(".shiny-date-input {height : 30px;}")
,dateInput("date1","date1")
,dateInput("date2","date2")
,textInput("text","text")
)
shinyApp(ui, function(input, output, session){})
Update: To clearify, I want the dateInput (and possibly the textinput also) frame to be less tall without it extending into the blow input:
You can add the class input-sm to the widgets in order to make them a bit smaller. To do so, use shinyjs.
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
dateInput("date1","date1"),
br(),
dateInput("date2","date2"),
br(),
textInput("text","text")
)
shinyApp(ui,
function(input, output, session){
addClass("date1", "input-sm")
addClass("date2", "input-sm")
addClass("text", "input-sm")
}
)
Found the answer in .form_control :
library(shiny)
ui <- fluidPage(
tags$style(".shiny-input-container {line-height: 5px; height : 25px}")
,tags$style(".form-control {height: 25px;}")
,dateInput("date1","date1")
,dateInput("date2","date2")
,textInput("text","text")
)
shinyApp(ui, function(input, output, session){})
Related
Hello.
I am trying to align the materialSwitch checkbox with some pickerInput boxes.
Here's what it looks like vs what I want it to look like:
Here is a simplified code of the problem, help please!
library(shiny)
library(shinydashboard)
library(shinyWidgets)
#----------------------------------------------------------------------------#
ui <- {dashboardPage(
dashboardHeader(title=""),
dashboardSidebar(),
dashboardBody(
fluidRow(box(column(materialSwitch("t0"),width=1),
column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
actionButton("t7","",width="100%"),width=12))))
}
#----------------------------------------------------------------------------#
server <- function(input, output) {}
#----------------------------------------------------------------------------#
shinyApp(ui = ui, server = server)
Also, if there's a way to tighten the space, or reduce the margin between the switch and the input boxes that would swell. My current code also makes one of the pickerInputs at a different width than the others (to include the switch), if there's a way to proportion them so they're all the same width that would be extra swell.
Thanks.
You can apply some css to move the materialSwitch.
div(column(materialSwitch("t0"),width=1), style = 'top: 25px;position:relative;')
Complete code -
library(shiny)
library(shinydashboard)
library(shinyWidgets)
#----------------------------------------------------------------------------#
ui <- {dashboardPage(
dashboardHeader(title=""),
dashboardSidebar(),
dashboardBody(
fluidRow(box(div(column(materialSwitch("t0"),width=1), style = ' top: 25px;position: relative;'),
column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
actionButton("t7","",width="100%"),width=12))))
}
#----------------------------------------------------------------------------#
server <- function(input, output) {}
#----------------------------------------------------------------------------#
shinyApp(ui = ui, server = server)
Hello.
I would like to change the color of this dropdown box which appears for numeric filters.
Sample code:
library(DT)
library(shiny)
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable")
)
server <- function(input, output) {
output$mytable = DT::renderDataTable({
DT::datatable(mtcars,filter="top")
})
}
shinyApp(ui, server)
Thanks
You only have to modify the suitable CSS on the ui function:
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable"),
tags$style(type = "text/css",
".noUi-connect {background: red;}")
)
Update
As explained in the comments, you can see in the next image (open it to see larger) where is the CSS modified to get a dark red where you want (in the right column of left window above is the element.style to which my comment below refers). The issue I am not able to solve is how to modify that tag (the shadowed one at the left) ` without a class or an id, with CSS or Shiny.
Is it possible to put all tabPanels in a row below the title of a navbarPage? In other words, I would like to keep the appearance of the navbarPage but on two rows: the title on the first one, and the tabPanels on the second. This would allow to "isolate" the title by keeping it on a single row.
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Note that this doesn't have to be a navbarPage. Any UI that could do that is accepted but it has to have the appearance of a navbarPage (no space between the rows, etc.). Hope this is clear enough.
Also asked on RStudio Community
You can force the title to have 100% width via CSS, thereby moving the tabPanels below it:
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab"),
tags$style(HTML(".navbar-header { width:100% }
.navbar-brand { width: 100%; text-align: center }")) # center text
)
server <- function(input, output, session) {}
shinyApp(ui, server)
By default tabs in a tabsetPanel are put on the left. Is it possible to place a tab on the right side, while still having other tabs on the left? So that it looks like this?
library(shiny)
ui <- fluidPage(
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Using float-right should indeed work. The problem with using 2 tabsetPanel is that there are 2 active tabs at the same time.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML(
".tabbable ul li:nth-child(3) { float: right; }"
))
),
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Maybe you can create 2 tabsetPanel and pull one over to the right?
rm(list = ls())
library(shiny)
ui <- fluidPage(
div(style="display:inline-block",tabsetPanel(type = c("pills"),tabPanel("tab_left1"),tabPanel("tab_left2"))),
div(style="display:inline-block;float: right",tabsetPanel(type = c("pills"),tabPanel("tab_right")))
)
server <- function(input, output, session) {}
shinyApp(ui, server)
When you apply the class float-right to the ones you want to float to the right, it should do the trick.
I want to scale a shiny plot to the height of the window. This related SO question only uses absolute height specifications in pixels, when a height = 100% would be preferable. I note in the documentation that absolutePanel can achieve this with its top, bottom, left, right arguments, but then you lose the side panel, and in any case the plot (while scaling to width) seems to ignore available height.
I'm guessing this relates to the html quirk that means you need to get the height with javascript innerHeight variable. But I'm unclear how to implement a solution in shiny to get ui.R to utilise this. Grateful for any pointers.
A basic app model for development:
ui.R
library(shiny)
shinyServer(
function(input, output) {
output$myplot <- renderPlot({
hist(rnorm(1000))
})
}
)
server.R
library(shiny)
pageWithSidebar(
headerPanel("window height check"),
sidebarPanel(),
mainPanel(
plotOutput("myplot")
)
)
Use CSS3. Declare your height in viewport units http://caniuse.com/#feat=viewport-units .
You should be able to declare them using the height argument in plotOutput however shiny::validateCssUnit doesnt recognise them so you can instead declare them in a style header:
library(shiny)
runApp(
list(server= function(input, output) {
output$myplot <- renderPlot({
hist(rnorm(1000))
})
}
, ui = pageWithSidebar(
headerPanel("window height check"),
sidebarPanel(
tags$head(tags$style("#myplot{height:100vh !important;}"))
),
mainPanel(
plotOutput("myplot")
)
)
)
)
This wont work in the shiny browser but should work correctly in a main browser.