As shown in the below image, I have a problem with a ghost tab that appears at the end of my navbar page.
The ghost tab disappears when the code below at the end of ui is deleted. The code is related to the loading sign. How can I fix this?
hidden(
div(
id = "app-content"
#p("")
)
)
I fixed this by moving the mentioned code to right after ui <- fluidPage(.
ui <- fluidPage(
hidden(
div(
id = "app-content"
#p("")
)
),
Related
I have the following snippet of code:
shinyUI(fluidPage(
useShinyjs(),
shinyjs::hidden(div(
id = "application",
navbarPage(
title = div(img(src="img_1.png", filetype="image/png"), "Indicators"),
id = "tabs",
tabpanel("Admin", ...)
tabpanel("User", ...)
)
))
))
I would like to add a second image, let's call it img_2.png to the right of the navbar, i.e. at the end of the navbar itself. Maybe the fact that I used title = forces me to place only one image in the navbar. Could anyone help me?
you can add an additional img tag and an style parameter, that sets the position to the right side:
title = div(img(src="img_1.png", filetype="image/png"), "Indicators", img(src="img_1.png", filetype="image/png", style = "position: fixed;right: 20px;"))
I would like to include a small image at the left of the title of my navbarPage, and to include another image completely at the right of this same navbarPage. I found this answer which provides the same layout than the one I would like to have. The problem is that this solution does not provide a fully reproducible example and I can't figure out how to include the chunks of code in the ui part.
Does anybody know how to make a reproducible example from this answer?
Here's what I've tried so far:
library(shiny)
ui <- navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> `</div>');
console.log(header)")
),
title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
This is the image called image.png. I put it in the www folder, which is placed in my app directory.
There are mainly two things to solve:
* some text is displayed on the below the navbar whereas it shouldn't be displayed at all
* the image and the text at the left are not centered
I did not make any change to your code (well except the tags$head() at the begining, but that's an add on).
The only problem with your code is not the problem in your code, is the problem in your files structure.You have to place your images inside a new folder called www (Note that the folder www is in the same place as your R code which is app.R or ui.R).
library(shiny)
ui <- fluidPage(
tags$head(
tags$link(rel = "shortcut icon", type = "image/png", href = "image.png"),
tags$title("Browser tab title")
),
navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </div>');
console.log(header)")
),
title = tags$div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Note: I've added the navbarPage inside a fluidPage because without the fluidPage, the title of the NavBarPage will be the title in the browser tab!But now the main UI is the fluidPage so it's title will be the browser title. this also gives you flexiblity to add a new image for the browser tab, different from the navbar page's tab.
Here's the screen shot of the output.
Hope this helps!
I'm Building a dashboard using the packages shiny and shinydashboard, The issue I am having is when I try to include a math symbol inline with text when the app is launched it always smaller than its surrounding text. When the app is launched and right click on a math symbol and navigate to
Math Setting>Math Render> the switch from HTML-CSS to HTML Preview it becomes the correct size. Wondering why this is the case and how I can make appear as the correct size by default so I don't have users switch HTML preview when they launch the app.
I tried adding the follow to change my Mathjax configuration upon the apps launch but it didn't seem to have any effect:
tags$div(HTML("<script type='text/x-mathjax-config' >
MathJax.Hub.Config({
showProcessingMessages: true,
jax: ['input/TeX', 'output/PreviewHTML'],
});
</script >
"))
Here is a basic version of what I'm dealing with when ran the Mu symbol is much smaller than the other text.
header <- dashboardHeader(
#Set the title and title size of the dashboard. This will be located in top left coner of app.
title = "My Dashboard",
titleWidth = 400
)
# Sidebar Layout
# Contains the design for collapsable sidebar of the dashboard which allows users to navigate to its differnt pages.
sidebar <- dashboardSidebar(
sidebarMenu(
# Each item navigates the dashboard to its corresponding page
menuItem("Inputs", tabName = "inputs",icon = icon("angle-right"))
)
)
#Boday Layout
# Contains the design for each indivual page listed within the side bar
body <- dashboardBody(
withMathJax(),
tags$div(HTML("<script type='text/x-mathjax-config' >
MathJax.Hub.Config({
showProcessingMessages: true,
jax: ['input/TeX', 'output/PreviewHTML'],
});
</script >
")),
dashboardBody(
# TabItemS refrences theset of dashboard pages as whole
tabItems(
# First Pages contents
tabItem(
tabName = "inputs",
h1("Here is the Problem"),
fluidRow(
box(width = 4,
h3("This symobl \\(\\mu\\) is much smaller")
)
)
)
)
)
)
ui <- dashboardPage(header,sidebar,body)
server <- function(input, output) {
}
shinyApp(ui, server)
is there any way to show all of the contents in the mainPanel only when the user clicks the action button? ive been searching the internet for awhile for the answer but couldn't really find an answer. i know i can use hidden - it works on smaller elements inside the mainPanel, such as showing a picture on click but doesn't work on the whole mainPanel itself. any suggestions? finding a way to wrap the whole main panel inside a hidden instead of each element in the mainPanel wrapped in a hidden would be easier i think but i can't seem to find a way to make it work.
in dashboard body:
fluidRow(
column(12, actionButton("analyze", "Fetch Data!", width = "100px"))),
hidden(
mainPanel(
hidden( (htmlOutput("artistpic")), // this works fine & shows on button click
infoBoxOutput("approvalBox"))
)),
server:
pic <- eventReactive(input$analyze2, {
print(get_id_picture()[3])
url = toString(get_id_picture()[3])
print(url)
url
})
output$artistpic <- renderText({c('<img src="',pic(),'"width="17%" height="17%">')})
This is easy with shinyjs.
Just surround mainPanel() with a div() tag so that you can use it's id for toggling it's visability and start the app with the div tag hidden using hidden() like in the following example:
# ui.R
fluidPage(
useShinyjs(),
actionButton("toggle.main.button", "Toggle Main"),
div(id = "main",
mainPanel(
p("This paragraph is in main."),
p("This one too!")
)
) %>% shinyjs::hidden()
)
# server.R
library(shinyjs)
function(input, output, session) {
# Toggling visability of main on button click.
observeEvent(input$toggle.main.button, {
shinyjs::toggle("main")
})
}
I'm trying to add a tabPanel in navbarPage so that when you click on it opens a modal window instead of a new tab. The snippet below is not valid because tabPanel does not have an id parameter.
library(shiny)
library(shinyBS)
shinyUI(fluidPage(
navbarPage("Sample App", id = "main_menu",
tabPanel("Open Modal", id = "moda")),
bsModal("modal1", "Example", "moda", p("This is a modal"))
)
If I edit the generated HTML code from browser, I can make this possible by changing the line
Open Modal
with
Open Modal
on the <li> element.
Any idea how to do this or at least how can I override the generated html from shiny?
One solution is to use Javascript to rewrite the attribute for the tab title. The JS code below finds the tab title link, and rewrites its attributes.
library(shiny)
jsStr <- '$(document).ready(function(){
$("a[data-value=\'OpenModal\']").attr({
"href":"#",
"data-toggle":"modal",
"data-target":"#modal1"
});
})
'
ui <- shinyUI(fluidPage(
tags$head(tags$script(HTML(jsStr))),
navbarPage("title",
tabPanel("OpenModal")
),
bsModal("modal1", "Example", "moda", p("This is a modal"))
))