I'm new to HTML and am trying to create a custom landing page in Shiny.
Here's a snippet of my UI, but I cannot get additional line breaks between the image and the text. The image and the text render fine, but the breaks do not exist. I've also tried blank tags$p() to no avail.
navbarPage("",
tabPanel("Home",
tagList(
tags$img(src="test_vine.jpg", width = "100%", height = "100%", align = "left"),
tags$br(),
tags$br(),
tags$p("this is a test"))),
The fluidRow will solve this. Probably understanding the working of fluidRow would solve major alignment issues.
ui <- navbarPage("", tabsetPanel(
tabPanel("Home",
tagList(
fluidRow(tags$img(src = "image.png", width = "100%", height = "100%", align = "left")),
tags$br(),
tags$br(),
fluidRow(p("this is a test")))
## Simple way
# fluidRow(img(src = "image.png", align = "left", height = 300, width = 500)),
# br(),
# br(),
# fluidRow("this is a test")
)))
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'm building a Shiny app with this UI. Here is nhl-logo.png
ui <- fluidPage(
titlePanel(tagList(
img(src = "nhl-logo.png", height = 60, width = 60),
"PLAY-BY-PLAY"),
windowTitle = "NHL Play-by-Play"),
div(style = "position:absolute;right:2em;",
actionButton('load_inputs', 'Load inputs'),
actionButton('save_inputs', 'Save inputs')
),
hr(),
fluidRow(...)
Unfortunately, the style is not what I want since it puts those actionButtons on a lower level than the title (NHL LOGO PLAY-BY-PLAY)
How do I change the style so that my actionButtons appear on the same horizontal level as the titlePanel?
You can add the title in a span which includes the buttons. The difference between a span and a div is that the span is inline (a div is a block).
ui <- fluidPage(
titlePanel(tagList(
img(src = "nhl-logo.png", height = 60, width = 60),
span("PLAY-BY-PLAY",
span(actionButton('load_inputs', 'Load inputs'),
actionButton('save_inputs', 'Save inputs'),
style = "position:absolute;right:2em;")
)
),
windowTitle = "NHL Play-by-Play"
),
hr(),
fluidRow()
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
I used shiny-dashboard package and the header needs to have a title, a text and a logo.
Title should be on the left side, text should be in the middle/center of the header and logo should be on the right side. Dashboard sidebar has also two filters (select inputs).The text in the middle is showing the user selections and therefore the length of the text is different based on various selections. I don't have a css background and not sure how to position the variable length text at the center of the header. Another problem is that when I minimize my screen, the text and logo stack on top of each other and don't stay in one line as shown below:
To simplify the code, I just used a simple text and I didn't show my server code here but "long text with variable length dependant on user selections" is basically a uiOutput and will be changed based on selections.
shinyApp(
ui = dashboardPage(
dashboardHeader(
title = HTML(paste0("Dashboard example")) , titleWidth = 455,
tags$li(class="dropdown",
tags$table(style="80%;align:center;border-collapse:seperate;border-spacing:20px;",
tags$tr(
tags$td(h3("long text with variable length dependant on user selections")),
tags$td(
a(href='link',
img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg',
title= "image title", height = "50px"),
style = "display:block;position:absolute,width:50px; padding-top:10px; padding-bottom:10px;padding-right:10px;"),
class="dropdown"))))),
dashboardSidebar(),
dashboardBody(tags$head(
tags$style(HTML("
.my_class {
font-weight: bold;
color:white;
}"))
))),
server = function(input, output) { }
)
Minimizing the screen breaks the header as below
Using the code provided below, I get this.
Try something like this:
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(
title = "Dashboard example",
titleWidth = 455,
tags$li(
class = "dropdown",
fluidRow(
column(
width = 4,
offset = 4,
align = "center",
span("long text with variable length dependant on user selections")
),
column(
width = 4,
align = "right",
img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg')
)
)
)
),
dashboardSidebar(width = 455),
dashboardBody(
tags$style(
".main-header .navbar-custom-menu {
width: calc(100% - 50px);
}
.main-header .navbar-nav,
.main-header .dropdown {
width: 100%;
}
.main-header img {
height: 50px
}"
)
)
),
server = function(input, output) {}
)
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.
I'm having issues aligning two input widgets in Shiny.
Specifically, I can't seem to get a password input and an action button (generated using uiOutput()) to be bottom aligned in the same row.
My current approach offsets the two widgets:
when what I want is:
My code:
library(shiny)
ui <- fluidPage(
fluidRow(
column(width = 4,
passwordInput(inputId = "answer.pass", label = "", value = "",
placeholder = "Enter Password for Answer")
),
column(width = 2, offset = 0,
uiOutput("actionBut.out")
)
)
)
server <- function(input, output) {
output$actionBut.out <- renderUI({
actionButton("copyButton1","Copy Code")
})
}
shinyApp(ui = ui, server = server)
I've come across other SO posts and other sites that seem to have similar problems, but none of their solutions work for my example.
Bottom align a button in R shiny
Shiny R Button Alignment
UI: positioning widgets (UI elements) side by side [Google Groups]
Can anyone suggest a working solution? Thanks!