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.
Related
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){})
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 would like format the text of individual choices displayed in a selectInput() dropdown menu. I have a list of text strings with html attributes:
myChoices_list <- c("<b>choice 1</b>", "<b>choice 2</b>", "<i>choice 3 </i>", "<i>choice 4</i>", "<<p style=\"text-indent: 20px\">choice 5</p>")
The html attributes call for bold, italics, and indentations applied to each string. I tried to apply the attributes with the HTML() function in the 'choices' option but with no luck.
ui <- fluidPage(
sidebarPanel(
selectInput(inputID = "myChoice", "Choice:"
, choices = HTML(myChoices_list))
)
)
While these formats work correctly in the mainPanel by setting an 'escape' option to FALSE in the server segment's output, the option doesn't appear to be available for the dropdown menu in selectInput().
I think the solution might have something to do with tags$style, but I am new to the structure of shiny and designation of text formats. It's also different from How to style an single individual selectInput menu in R Shiny? in that the html formats are already part of the list. The actual list is a large one as well.
Why not use jQuery for that?
$('#DropdownSelectID').change(function () {
var selectedVal = $('#DropdownSelectID :selected').val();
if (selectedVal == '1') {
$("#DropdownSelectID").css('cssText', 'font-weight: bold; color: blue');
}
else if (selectedVal == '2') {
$("#DropdownSelectID").css('cssText', 'color: red');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='DropdownSelectID'>
<option value='0'>-- Select --</option>
<option value='1'>Hi</option>
<option value='2'>Hello</option>
</select>
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)
For example I have some form which looks like this:
#main{
<fieldset>
#inputText(myForm"Id"),'_label -> "Id")
#checkbox(myForm("isEnabled"))
#inputText(myForm("someOptionvalue"))
</fieldset>
}
What I need is that if isEnabled is checked - someOptionValue inputText should be shown.
This checkbox is just an example and it can be any other element. I want to know how to show\hide elements depending on other elements. Sorry for my bad English. I hope somebody can help.
add I think I should use java script but i don't know how inject js functions in play view templates
The Play's form elements you used are Play Scala templates used to generate plain html.
For your purposes I think you should just use javascript the way you would any html form. An example would be:
<script type="text/javascript">
window.onload = function(e) {
document.getElementById("myCheck").onclick = function() {
showHideElement();
};
showHideElement();
}
function showHideElement() {
var checked = document.getElementById("myCheck").checked;
var el = document.getElementById("myOptionValue");
if (checked) {
el.style.display = 'block'
} else {
el.style.display = 'none'
}
}
</script>
Your checkbox and input text template should both have id attributes added to them, example:
#checkbox(myForm("isEnabled"), 'id -> "myCheck")
#inputText(myForm("someOptionvalue"), 'id -> "myOptionValue")
Just for info you could add more attributes to the tags above like CSS style class, example:
#inputText(myForm("name"),
'id -> "username",
'class -> "classForInputText",
'_id -> "idForTheTopDlElement",
'_class -> "classForTheTopElement",
'size -> 30
)
You can then set the display to none or block