Here is a simple example of a navigation list panel:
library(shiny)
ui <- fluidPage(
titlePanel("Navlist panel example"),
navlistPanel(
"Header",
tabPanel("First",
h3("This is the first panel")),
tabPanel("Second",
h3("This is the second panel")),
tabPanel("Third",
h3("This is the third panel"))
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
I need the well (AKA the grey rectangle with rounded corners that is around the navigation list) to be taller and expand to take the white space marked by the red rectangle:
Image
There is no argument in the navlistPanel() function to do this (there is only the width argument)
I would go with something as follow, adding a style tag and adding custom height to the .row element.
library(shiny)
ui <- fluidPage(
titlePanel("Navlist panel example"),
tags$style(".row{height: 500px;} .row div:nth-child(1){height: 100%;}"),
navlistPanel(
"Header",
tabPanel("First",
h3("This is the first panel")),
tabPanel("Second",
h3("This is the second panel")),
tabPanel("Third",
h3("This is the third panel"))
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
PS: be aware that you can have multiple rows in your app
Related
I would like to know what was the easiest way to set up a different image to each of my 3 shiny main tabpanels ?
I thought that using setBackgroundImage(src = "image1.jpg", shinydashboard = TRUE), setBackgroundImage(src = "image2.jpg", shinydashboard = TRUE), etc. in each of them would do the trick but unfortunately it is not that simple.
I guess I shall use some CSS but I'm very new to this and I didn't find a solution to my problem yet.
Any guess about how I should do that ?
Minimal app:
library(shiny)
library(shinyWidgets)
ui <- shinyUI(navbarPage(id="Test", "TEST",
header = tagList(
useShinydashboard()
),
tabPanel(
"Welcome", value="welcome",
verbatimTextOutput("text1")),
tabPanel(
"Tab1", value="first_tab",
verbatimTextOutput("text2")),
tabPanel(
"Tab2", value="second_tab",
verbatimTextOutput("text3"))))
server <- shinyServer(function(input, output, session){
output$text1 <- renderText("Trying to set up a first background image in this whole panel")
output$text2 <- renderText("Trying to set up a second background image in this whole panel")
output$text3 <- renderText("Trying to set up a third background image in this whole panel")
})
shinyApp(ui, server)
You can use the CSS background-image Property to achive this:
library(shiny)
library(shinyWidgets)
# remove /* ... */ to use the arguments
backgroundImageCSS <- "/* background-color: #cccccc; */
height: 91vh;
background-position: center;
background-repeat: no-repeat;
/* background-size: cover; */
background-image: url('%s');
"
ui <- shinyUI(navbarPage(id="Test", "TEST",
header = tagList(
useShinydashboard()
),
tabPanel(
"Welcome", value="welcome",
verbatimTextOutput("text1"),
style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/r-logo.png")
),
tabPanel(
"Tab1", value="first_tab",
verbatimTextOutput("text2"),
style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/matlab-logo.png")
),
tabPanel(
"Tab2", value="second_tab",
verbatimTextOutput("text3"),
style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/python-logo.png")
)
))
server <- shinyServer(function(input, output, session){
output$text1 <- renderText("Trying to set up a first background image in this whole panel")
output$text2 <- renderText("Trying to set up a second background image in this whole panel")
output$text3 <- renderText("Trying to set up a third background image in this whole panel")
})
shinyApp(ui, server)
When using local images store them into a www folder (subdirectory of your app folder) or use addResourcePath to add the images as static resources to Shiny's web server,
Also see this related answer.
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)
You can normally make a horizontal rule under UI elements with hr() when using fluidRow() in Shiny, but you can't do it in a sideBarPanel() under text. How can I make a horizontal rule, or something else like it, to divide text and UI elements in my sidebar?
In general the line is visible, but with very low contrast to the background.
To make the line more visible you can modify the CSS code by including the following in the ui part:
tags$head(
tags$style(HTML("hr {border-top: 1px solid #000000;}"))
),
with tags$style(HTML(...)) you can include CSS in your app. The html tag for the line is hr. And the remaining parameter indicate specification of line choice, width, color, etc.
For a full working example see below:
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("hr {border-top: 1px solid #000000;}"))
),
sidebarLayout(
sidebarPanel(
"text",
hr(),
uiOutput("out")
),
mainPanel(
plotOutput("distPlot")
)
)
)
server <- function(input, output) {
output$out <- renderUI({
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
})
}
shinyApp(ui = ui, server = server)
Update 12.2020:
Comment from David Ranzolin, see comment section.
You can also pass a style argument to hr() directly, e.g.: hr(style = "border-top: 1px solid #000000;")
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){})