I would like to add a hover message which will appear when I move my mouse above the "i" information icon.
info icon
I added the icon with:
numericInput("fixed_ratio",
label = tags$div(HTML('Fixed ratio <i class="fas fa-info-circle"
style = "color:#0072B2;"></i>')),
value = 1)
Within the "HTML", I tried to add "title" to work as the hover message, but it didn't work out.
Is there any way to add the message? Thanks!!
This works for me:
library(shiny)
ui <- fluidPage(
numericInput(
"fixed_ratio",
label = tags$span(
"Fixed ratio",
tags$i(
class = "glyphicon glyphicon-info-sign",
style = "color:#0072B2;",
title = "message"
)
),
value = 1
)
)
shinyApp(ui, function(input, output){})
Related
I have added footer in my shiny app using html tag with fluidPage():
tags$footer(HTML(sprintf("For further information visit www.website.com",
align = "center",
style = "position:absolute; width: 100%; color: white;")
I need help making the link clickable. Can someone help me with the correct syntax in this example?
Also, any suggestions where to learn more about HTML & CSS implementation and syntax in shiny would be very useful.
You can use a HTML a Tag:
library(shiny)
ui <- fluidPage(
tags$footer(
"For further information visit ",
tags$a(
"www.google.com",
target = "_blank",
href = "https://www.google.com/"
),
style = "position: absolute; width: 100%; color: black; text-align: center;"
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
I am trying to add tooltips/popovers for a Shiny application, and use this question as example
Add Tooltip to Tabs in Shiny
The problem is I can't use HTML() to modify the title. I need to have a line break <br>between lines, and text with bold, color. Normally it worked for all of titles I used except this one.
Any thoughts?
library(shiny)
shinyApp(
ui =
navbarPage(tabsetPanel(
tabPanel(span("Tab 1", title = HTML(
"<span style='color: red;font-weight:bold;text-decoration: underline;'>Test</span>
<span style='font-weight:bold;color:black;'> File</span> <br>'Another test'"
)
)),
tabPanel("Tab 2"),
tabPanel("Tab 3"),
)),
server = function(input, output) {
}
)
While you can't set a title attribute using a HTML() function, I believe you can achieve your desired outcome by adding a data-toggle attribute to the tab span, and then using a little Javascript/jquery to set the span's tooltip properties to include html: true:
library(shiny)
title_html <- "<span style='color: red;font-weight:bold;text-decoration: underline;'>Test</span>
<span style='font-weight:bold;color:black;'> File</span> <br>'Another test'"
shinyApp(
ui = navbarPage(
tags$script(HTML('
$( document ).on("shiny:sessioninitialized", function(event) {
$(\'span[data-toggle="tooltip"]\').tooltip({
html: true
});
});'
)),
tabsetPanel(
tabPanel(span("Tab 1", title = title_html,
`data-toggle`="tooltip")),
tabPanel("Tab 2"),
tabPanel("Tab 3")
)
),
server = function(input, output) {
}
)
Then, if you want to further customize the appearance/behavior of the tooltip, you can add other options (beyond just html: true) to that script tag, as listed in the Bootstrap tooltip docs.
I have the following conditional panel:
conditionalPanel
(condition = 'input.show_p =="1"',
fluidRow(
box(width =12,
actionLink(inputId = "p_name", label = "Path"),
HTML("/"),
conditionalPanel(condition = 'input.show_l == "1"',
actionLink(inputId = "l_name", label = "Path"),
HTML("/")
)
)
)
)
As I have seen in the generated html, I found the inner most conditional panel is translated to a div with display: block as below:
<div data-display-if="input.show_l == "1"" data-ns-prefix="" style="display: block;">
<a id="pl_name" href="#" class="action-button shiny-bound-input"> LM </a>
/
</div>
The question is how can I change it to display: inline in R? Or in the other words, how can I set style for the conditional panel in R Shiny?
Style can be added to a conditional panel just as to most other elements, using the style argument with a valid css string.
Conditional Panels use the jQuery show and hide methods, which have the feature to set the display property to none for hide and show to block or any value the element had before jQuery was manipulating it. This last part means, we can just set the display to inline-block and it will be preserved like regular styling.
A short version would be like this:
library(shiny)
ui <- fluidPage(
actionButton("show_p", "Toggle"),
"Some text to wrap the",
conditionalPanel(condition = 'input.show_p % 2', id="nice", style="display: inline-block;", "hidden"),
"conditional panel."
)
server <- function(session, input, output) {}
shinyApp(ui, server)
Add an id for the panel, and then modify it in custom.css referenced file:
# in shiny dashboard
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"))
#...
conditionalPanel
(condition = 'input.show_p =="1"',
fluidRow(
box(width =12,
actionLink(inputId = "p_name", label = "Path"),
HTML("/"),
conditionalPanel(condition = 'input.show_l == "1"', id="pl_panel"
actionLink(inputId = "l_name", label = "Path"),
HTML("/")
)
)
)
)
And, as you knew, modify the referenced style file (custom.css):
#pl_panel
{
display: inline-block
}
If you're wanting to use a CSS class selector, you can add a class to the conditionalPanel using conditionalPanel(…) %>% tagAppendAttributes(class = "inline"), then add .inline {display: inline-block;} to your CSS.
The given script creates an action button and a slider in r shiny. If I wish to give certain attributes to {{ button }} in html script like position, margin from left, height and width, please help me with this.
<!-- template.html -->
<html>
<head>
{{ headContent() }}
</head>
<body>
<div>
{{ button }}
{{ slider }}
</div>
</body>
</html>
## ui.R ##
htmlTemplate("template.html",
button = actionButton("action", "Action"),
slider = sliderInput("x", "X", 1, 100, 50)
)
reproducible example, note that action button can be styled directly by using #action selector however slider input has container therefore positioning of the slider as such should be done at container level and cannot be done by selecting id. As far as i know css selector doesnt have equivalent of jquery :has()
library(shiny)
shinyApp(
ui <- fluidPage(
fluidRow(actionButton("action", "Action"),sliderInput("x", "X", 1, 100, 50)),
tags$head(
tags$style('#action { margin:3px;border:2px solid green;padding 20px;}
.slider-custom-format { margin:3px;border:1px solid red;}
.slider-custom-format .irs-bar,.slider-custom-format .irs-bar-edge{background:red;}'),
tags$script('$(function(){
$(".form-group.shiny-input-container:has(#x)").addClass("slider-custom-format")
})')
)
),
server <- function(input, output) {})
I would like to open a html link when I click on a button, a "material button" from the shinymaterial package
library(shiny)
library(shinymaterial)
ui <- material_page(
title = "page",
material_button(
input_id = "button1",
label = "label1",
color = "blue"
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
I can do :
label = a("label1",href="my link",target="_blank")
but then it works only when I click on the label of the button.
Can I add my link on the server part of the shinyapp?
You can always use Javascript, but there is another approach if you know all these Shiny UI are just html code.
I answered a similar question before, which is actually a general method that can solve many different questions.
First we look at what is a material button:
> material_button(
+ input_id = "button1",
+ label = "label1",
+ color = "blue"
+ )
<button class="waves-effect waves-light btn shiny-material-button blue" id="button1" value="0">label1</button>
All the Shiny UI functions just generate html code with some attributes, and you can run them in console to see the result, this is a easy way to experiment.
If you look at ?shiny::actionButton, there are actionButton and actionLink. What is the difference?
> shiny::actionButton("test", "button")
<button id="test" type="button" class="btn btn-default action-button">button</button>
> shiny::actionLink("test", "button")
<a id="test" href="#" class="action-button">button</a>
Instead of insert link in a button, we can create a link with appearance of button.
You can play with all the Shiny html tag functions if you know what the html code should look like for your purposes. Now we want a link with some text, a target, some css class.
A dynamic link in Shiny can be created like this:
a(h4("Open Link"), target = "_blank", href = paste0("http://www.somesite/", some_link))
Note this is not the simplest way to create link. I used this format because I want to be able to generate link dynamically in server code. This example can give you some hints on how to combine different html tag functions:
overall it's a link so we use a in outmost layer
you can use any format to show the text/label, I used h4, which probably will be override by the css, but this give you the idea
you can generate the attributes dynamically
Then we just need to apply the proper css class to it to make it look like a material button:
> shiny::a(h4("Open Link", class = "waves-effect waves-light btn shiny-material-button blue" , id = "button1",
+ style = "fontweight:600"), target = "_blank",
+ href = paste0("http://www.somesite/", "some_link"))
<a target="_blank" href="http://www.somesite/some_link">
<h4 class="waves-effect waves-light btn shiny-material-button blue" id="button1" style="fontweight:600">Open Link</h4>
</a>
Note I used full qualified name shiny::a, otherwise sometimes there could be warnings for some short html tag function names. I also added a style attribute which is probably not needed in this case but this is a simple way to make further customizations.
Note:
the color parameter may change the css class value, so you need to use the specific value from that.
action button have an id which can be used for event observer, but for a button of link you usually don't need that because the behavior is just opening a link.
Another hint for customizing Shiny app visual appearance:
run the Shiny app in browser, turn on developer tools in Chrome/firefox
find the css for the element you want to change, experiment with it until you are satisfied with it
save it in a css file under www folder, include it in UI code with includeCSS("www/styles.css").
As it seems it cant be passed as an argument for the materialButton() so instead you could add it yourself via javascript:
Find the element by Id and add an onlick listener.
library(shiny)
library(shinyjs)
library(shinymaterial)
ui <- material_page(
useShinyjs(),
title = "page",
material_button(
input_id = "button1",
label = "label1",
color = "blue"
)
)
server <- function(input, output) {
runjs("document.getElementById('button1').onclick = function() {
window.open('http://stackoverflow.com/', '_blank');
};"
)
}
runApp(shinyApp(ui = ui, server = server), launch.browser = TRUE)