I have managed to code the following with Shinydashboard.
Is there any way to reduce
space between selectInput and numericInput as shown?
vertical space between "type" and "interval" selectInput?
narrow the height of menuItem "Charts"
A solution with adjustment to CSS would be good. Thank you.
Code:
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Simple board"),
dashboardSidebar(
sidebarMenu(id = "S",
menuItem("Charts", tabName = "V", icon = icon("database","fa-lg")),
h5(div(style="display:inline-block;width:50%;text-align: left;",
selectInput("Q", label = "type", choices = c("A","B","C"))),
div(style="display:inline-block;width:50%;text-align: left;",
numericInput("NT", "Num", 15, min = 10, max = 33)),
selectInput("s2", label = "interval", choices = c("17 mins","38
min","124 mins"))
)
)
),
dashboardBody()
)
server <- function(input, output) {
}
shinyApp(ui, server)
You can achieve this with the help of margin property.
For example, for selectInput, you can set margin-left:5px or so.
Similarly for interval input, you can set margin-bottom:5px for the div just above it.
You can also set negative value for margin property.
I hope this might help.
Related
I am trying to fix my width on my R Shiny map. Also, I am not succeeding in making the panel faded. The width and faded panel I want to replicate is here at this link:
https://shiny.rstudio.com/gallery/superzip-example.html
I am using their style css file, this link: https://github.com/rstudio/shiny-examples/blob/master/063-superzip-example/styles.css
I have written my code:
library(shiny)
library(tidyverse)
library(leaflet.extras)
library(leaflet)
library(RColorBrewer)
library(scales)
library(lattice)
library(dplyr)
fake_data <- read.csv("https://raw.githubusercontent.com/gabrielburcea/stackoverflow_fake_data/master/gather_divided.csv")
# Define UI for application that draws a histogram
ui <- fluidPage(
navbarPage("Covid-19 Symptom Tracker", id = "nav",
tabPanel("Interactive map",
div(class = "outer",
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
),
leafletOutput("map", width = "100%", height = "96vh"), #height = "99vh"
#Floating panel
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
width = 330, height = "auto",
h4("SARS-Covid-19 symptoms"),
selectInput("symptom", "Select symptom", c("Chills",
"Cough", "Diarrhoea",
"Fatigue",
"Headache",
"Loss of smell and taste",
"Muscle ache",
"Nasal congestion",
"Nausea and vomiting",
"Shortness of breath",
"Sore throat",
"Sputum",
"Temperature")
),
tags$div(id="cite",
'Data provided by Your.md'
)
)))
)
)
server <- function(input, output) {
filtered_data <- reactive({
fake_data %>%
dplyr::filter(Symptom %in% input$symptom)
})
output$map <- renderLeaflet({
leaflet() %>%
addTiles(urlTemplate = "//{s}.tiles.mapbox.com/v3/jcheng.map-5ebohr46/{z}/{x}/{y}.png",
attribution = 'Maps by Mapbox') %>%
addMarkers(data = filtered_data(), clusterOptions = markerClusterOptions())
})
}
# Run the application
shinyApp(ui = ui, server = server)
And the css style I am using (just the same as theirs) is here:
https://github.com/gabrielburcea/stackoverflow_fake_data/blob/master/style.css
The panel I have is this which is obviously different than the one in the link I provided:
I get the following output:
when I run your code. I like the floating dialog box which fades. There is some white space along the title, and some more when I zoom out completely. It looks fine to me. Also, I saved the CSS file via Notepad. I don't think that should make any difference if you saved it via RStudio.
I have a simple app that uses verbatimTextOutput to display some texts. I am wondering if it is possible to have the width of verbatimTextOutput to be fixed and have the text output change lines?
Please see this example (https://yuchenw.shinyapps.io/verbatimtext_bookmark/). I also attached the code below.
As the attached screenshot shows, when the string is very long, the verbatimTextOutput would not show all the text. Instead, the verbatimTextOutput would show a scroll bar at the bottom.
However, I hope there will be no scroll bar at the bottom of the verbatimTextOutput. I also need that when the texts are long, change lines to fit in the verbatimTextOutput. Taking the following as an example, which is by clicking the bookmark button. We can see that this lengthy URL change lines, and there is no scroll bar at the bottom of the output. If the bookmark button can do that, I hope I can also make the verbatimTextOutput show similar characteristics and appearance of the bookmark.
Please let me know if you have any questions.
Code
library(shiny)
ui <- function(request){
fluidPage(
column(
width = 6,
textInput(inputId = "txt", label = "Type in some texts",
value = paste0(rep(letters, 10), collapse = "")),
strong("Show the texts"),
verbatimTextOutput("txt_out"),
br(),
bookmarkButton()
)
)
}
server <- function(input, output, session){
output$txt_out <- renderText({
input$txt
})
}
enableBookmarking("url")
shinyApp(ui, server)
Please try the following css:
library(shiny)
ui <- function(request){
fluidPage(
tags$style(type='text/css', '#txt_out {white-space: pre-wrap;}'),
column(
width = 6,
textInput(inputId = "txt", label = "Type in some texts",
value = paste0(rep(letters, 10), collapse = "")),
strong("Show the texts"),
verbatimTextOutput("txt_out"),
br(),
bookmarkButton()
)
)
}
server <- function(input, output, session){
output$txt_out <- renderText({
input$txt
})
}
enableBookmarking("url")
shinyApp(ui, server)
I am working on a Shiny dashboard and using valueBoxes to display current KPI's. What I am noticing though, is depending on how long some of the text is, it elongates the box to fit the text which then screws up the look.
How do I make it so the text is always only on it's 1 line (i.e. change the font to be the width of the box) no matter what the screen size is?
Also, if you have any HTML or CSS pointers to make the information in a better layout, let me know.
I have to display:
value
description of what the value represents
estimation of future
value
In my actual dashboard:
I have the box background color changed
rounded out the edges
Have the value font color change based on thresholds
Code:
ui <- dashboardPage(
dashboardHeader(title = "Dynamic boxes"),
dashboardSidebar(),
dashboardBody(
fluidRow(
valueBoxOutput("vbox", width = 2),
valueBoxOutput("vbox2", width = 2),
valueBoxOutput("vbox3", width = 2),
valueBoxOutput("vbox4", width = 2),
valueBoxOutput("vbox5", width = 2),
valueBoxOutput("vbox6", width = 2)
)
)
)
server <- function(input, output) {
output$vbox <- renderValueBox({
valueBox(
"55%",
HTML(paste("test_value that is super long like this",br(),"Estimated: 98%")),
icon = icon("credit-card")
)
})
output$vbox2 <- renderValueBox({
valueBox(
"70%",
HTML(paste("this one is just as long, maybe even longer",br(),"Estimated: 100%")),
icon = icon("credit-card")
)
})
output$vbox3 <- renderValueBox({
valueBox(
"80%",
HTML(paste("this one is short",br(),"Estimated: 50%")),
icon = icon("credit-card")
)
})
output$vbox4 <- renderValueBox({
valueBox(
"100%",
HTML(paste("medium length like here",br(),"Estimated: 95%")),
icon = icon("credit-card")
)
})
output$vbox5 <- renderValueBox({
valueBox(
"90%",
HTML(paste("test_value that is super long like this",br(),"Estimated: 80%")),
icon = icon("credit-card")
)
})
output$vbox6 <- renderValueBox({
valueBox(
"40%",
HTML(paste("test_value that is super long like this",br(),"Estimated: 70%")),
icon = icon("credit-card")
)
})
}
shinyApp(ui, server)
}
The ui of the following example contains four selectInput. The last two of them are in a splitLayout. I noticed that, when I launch the app, the label of the last two would overlap if the window size is not large enough, as the first screenshot shows. Is it possible to make the label of the input in splitLayout dynamically change depends on the width of the window? A comparison would be the first two selectInput. As shown in the second screenshot, when I reduce the window width, the label would change to two lines. I would like to have the same behavior for the last two selectInput in splitLayout.
library(shiny)
# Define UI
ui <- fluidPage(
mainPanel(
selectInput(inputId = "A", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
selectInput(inputId = "B", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
splitLayout(
selectInput(inputId = "C", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
selectInput(inputId = "D", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
# Expand the menu in splitLayout
# From: https://stackoverflow.com/a/40098855/7669809
tags$head(tags$style(HTML("
.shiny-split-layout > div {
overflow: visible;
}
")))
)
)
)
# Server logic
server <- function(input, output, session){
}
# Complete app with UI and server components
shinyApp(ui, server)
First screenshot:
Sceond screenshot:
Update
#Simran has pointed out that overflow: visible is the cause of this issue. However, I need this to expand my menu in the selectInput based on this post: https://stackoverflow.com/a/40098855/7669809
I assume using fluidRow() with column() is an option for you.
Then you could use:
fluidRow(
column(width = 4,
selectInput(...)
),
column(width = 4,
selectInput(...)
)
)
Note 1:
You can control the width of an input by the width parameter of column().
Note 2:
Sidenote: If you want to use the full width of 12, you also have to set the mainPanel() to 12, see e.g. here:
https://stackoverflow.com/a/44214927/3502164
Full app - reproducible example:
library(shiny)
# Define UI
ui <- fluidPage(
mainPanel(
selectInput(inputId = "A", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
selectInput(inputId = "B", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
fluidRow(
column(width = 4,
selectInput(inputId = "C", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a")
),
column(width = 4,
selectInput(inputId = "D", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a")
)
),
# Expand the menu in splitLayout
# From: https://stackoverflow.com/a/40098855/7669809
tags$head(tags$style(HTML("
.shiny-split-layout > div {
display: inline-block;
}
")))
)
)
# Server logic
server <- function(input, output, session){
}
# Complete app with UI and server components
shinyApp(ui, server)
Remove overflow: visible. This is what is making the text spill over the div. I see that here in your code:
.shiny-split-layout > div {
overflow: visible;
}
I am using multiple navbars on my shiny dashboard page because I plan to create a conditional filter based on which tab is selected. Can the space between the two nav bars be removed?
Also, can the space reserved for the title be removed? I've seen some similar questions on here but I am pretty bad with CSS, so if someone could show me exactly where I can edit my code, that would be awesome.
Code:
library(shiny)
library(shinydashboard)
library(data.table)
library(dplyr)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(width = 325,
uiOutput("filter")),
dashboardBody(
navbarPage(header="",title=NULL,id="trythis" ,
tabPanel("BigTab1",
navbarPage(title = NULL,id="firstbar",
tabPanel("SubTab1",
dataTableOutput("table1")),
tabPanel("SubTab2"))),
tabPanel("BigTab2",
navbarPage(title=NULL,id="secondbar",
tabPanel("SubTab3",
dataTableOutput("table2")),
tabPanel("SubTab4")))
)
)
)
server <- function(input, output){
output$table1<-renderDataTable({
data<-filter(mtcars,cyl %in% input$test)
data.table(data[,1:2])
},options = list(lengthMenu = c(5, 10, -1), pageLength = 5))
output$table2<-renderDataTable({
data<-filter(mtcars,cyl %in% input$test)
data.table(data[,1:2])
},options = list(lengthMenu = c(5, 10, -1), pageLength = 5))
output$filter<-renderUI({
if(input$trythis=="BigTab1"){
selectInput("test","Test",choices = c("4","6","8"),selected=c("4","6"),multiple = TRUE)
}else{
selectInput("test","Test",choices = c("4","6","8"),multiple = FALSE)
}
})
}
shinyApp(ui = ui, server = server)
I want to remove the red, more worried about the space between the bars than the others, but the title space on the navbar is also pretty bad when you make the window smaller. Thanks in advance for any help!