I have changed the height of my daterangeInput box but cannot figure out how to get the separator box sized to match.
I used RNotebook to generate the HTML for my code and suspect that this line may hold the key:
to
I tried adding .input-group-addon{height: 22px} - this did not help.
library(shiny)
ui <-
fluidPage(
tags$style(type='text/css', ".form-control {height: 22px;font-size: 12px;}")
dateRangeInput('dateRange',label = "Date Range",start = "2009-01-01", end =" 2010-01-01"))
server <- function(input, output) {}
shinyApp(ui, server)
Imgur
Try this:
.input-daterange .input-group-addon {
height: 22px;
font-size: 10px;
line-height: normal;
}
Related
I am building a Shiny app where I want to add some italic text in the navbarPage at the right side. According to the question: Shiny NavBar add additional info I wrote the following code, but it doesn't work out for me:
This is some demo code I have now:
ui <- fluidPage(
navbarPage(theme = shinytheme("flatly"), collapsible = TRUE,
HTML('<a style="text-decoration:none;cursor:default;color:#FFFFFF;" class="active" href="#">Dashboard</a>'), id="nav",
navbarMenu('Graphs', icon = icon('chart-area'),
tabPanel('One country'),
tabPanel('Two countries')),
tabPanel('Tables'),
tags$script(HTML("var header = $('.navbar> .container-fluid');
header.append('<div style=\"float:right\"><h5>Some very important text</h5></div>');
console.log(header)"))
))
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
This results in:
the following warning message: Warning message:
Navigation containers expect a collection of bslib::nav()/shiny::tabPanel()s and/or bslib::nav_menu()/shiny::navbarMenu()s. Consider using header or footer if you wish to place content above (or below) every panel's contents.
not the desired output. Because, the text is not visible, because it has the same colour as the background, the text is under the Dashboard, Graphs en tables text, but I want them to be on the same line. The text is not in italic.
Output now
This is what I want:
Desired output
After the answer from lz100 it looks very nice on a big screen, but the text is still under the Dashboard, Graphs en tables text. And when I change the format of the Rshiny dashboard to my very small laptopscreen, the output becomes likes this:
Output after answer from lz100
library(shiny)
library(shinythemes)
ui <- fluidPage(
navbarPage(theme = shinytheme("flatly"), collapsible = TRUE,
HTML('<a style="text-decoration:none;cursor:default;color:#FFFFFF;" class="active" href="#">Dashboard</a>'), id="nav",
navbarMenu('Graphs', icon = icon('chart-area'),
tabPanel('One country',
tags$script(HTML(
"
var header = $('.navbar> .container-fluid');
header.append('<div id=\"my-title\">Some very important text</div>');
")),
tags$style(HTML(
'
.navbar-collapse.collapse {display: inline-block !important;}
#my-title {
float:right;
display: flex;
color: white;
align-items: flex-end;
justify-content: flex-end;
height: 60px;
font-style: italic;
}
'
))
),
tabPanel('Two countries')),
tabPanel('Tables')
)
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
The reason you have warnings is because you put tags$script under navbarPage. Not a big deal to me, but I relocate your script inside the first tabPanel, warnings are gone.
Some CSS and JS added to create your desired output
Search/Read here if you don't know how these CSS work: https://www.w3schools.com/css/default.asp
I am interested in removing or hiding the side arrows that appear when you use numericInput() with shiny. I will attach an image of the arrows that I am referring to so everyone can understand which part I would like to remove/hide. After reading the documentation, it does not appear that there is an option to remove these arrows. So I am wondering if there is a way to use CSS to remove these arrows. I did see one other post that asked a similar question. However, I am only interested in using numericInput().
I will attach some sample code. The code essentially does nothing but it will give you a reproducible example.
library(shiny)
server <- function(input, output){
}
ui <- fluidPage(
titlePanel("Test1"),
sidebarLayout(
sidebarPanel(
numericInput("n",
label = h4("Test2"),
min=1,
value = 20),
numericInput("x",
label = h4("Test3"),
min=0,
value = 10),
h4(textOutput("pvalue"))
),
mainPanel(
plotOutput("nullplot")
)
)
)
shinyApp(ui = ui, server = server)
runApp()
WARNING: I have read online that the side arrows do not show up on all web browsers and some versions of RStudio. See here
It does not appear that there is a way to remove the arrows from a numericInput(), however, there is a way to hide them. Just to be clear there is a difference between removing and hiding. Removing the arrows, in theory, should completely remove the code for the arrows. Hiding the arrows will simply mask the code for the side arrows, however, the code will still be present but will not be seen by the user unless they inspect the page.
Below is CSS that can be used to hide the side arrows from numericInput().
tags$head(
tags$style(HTML("
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::{
-moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
"))
)
If you wanted to apply this code to the example given in the question, then you could do something like this
library(shiny)
server <- function(input, output){
}
ui <- fluidPage(
titlePanel("Test1"),
sidebarLayout(
sidebarPanel(
tags$head(
tags$style(HTML("
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::{
-moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
"))
),
numericInput("n",
label = h4("Test2"),
min=1,
value = 20),
numericInput("x",
label = h4("Test3"),
min=0,
value = 10),
h4(textOutput("pvalue"))
),
mainPanel(
plotOutput("nullplot")
)
)
)
shinyApp(ui = ui, server = server)
runApp()
Overall this is just a workaround because there is no option to remove the side arrows.
Edit: Based on the comment added "". The code works now.
I am trying to embed a 3D mol viewer in my shiny app as described here:
http://3dmol.csb.pitt.edu/doc/tutorial-embeddable.html
I tried the following code:
library(shiny)
ui <- fluidPage(
mainPanel(
fluidRow(
tags$head(HTML('<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>')),
tags$div(
style="height: 400px; width: 400px; position: relative;",
class='viewer_3Dmoljs',
'data-pdb' ='1YCR',
'data-backgroundcolor' ='0xffffff',
'data-style' ='stick'
))
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
It look like the data-pdb, data-backgroundcolor and data-style are not recognized. If I remove these arguments I get a black box. Anybody knows how I could get this working? Also, would it be possible to direct the load-pdb to a local file?
i'm trying to figure out a way to get an actionButton to change color (and possibly other style elements as well.)
The objective is very general and I'll use this for many button responses throughout my complex shinyDashboard App. Simply said: if a button is clicked, or a specific element (i.e. inputslider) changes that is linked to a button, the button should change color.
I usually code my buttons in Shiny like this one:
actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"),
style = "color: white;
background-color: #35e51d;
position: relative;
left: 3%;
height: 35px;
width: 35px;
text-align:center;
text-indent: -2px;
border-radius: 6px;
border-width: 2px")),
I've been browsing my ass off, but no luck to something that works.
I have been looking at shinyjs by #Dean Attali to do this, but I can only get it to work to change the background of the printed text as in the example below. The part using ToggleClass or AddClass doesn't work for actionButton("x", "y") it seems.
I've also tried to use updateActionButton from the shiny package itself, but this does not seem to allow style = "..." to be included in the command.
library(shiny)
library(shinyjs)
library(shinyBs)
if (interactive()) {
shinyApp(
ui = fluidPage(
useShinyjs(),
inlineCSS(list(.red = "background: red")),
inlineCSS(list(.blue = "style = 'background-color: blue'")),
actionButton("checkbox", "Make it red"),
bsButton("checkbox2", "Make me blue"),
p(id = "element", "Watch what happens to me")
),
server = function(input, output) {
observe({
toggleClass(id = "element", class = "red",
condition = input$checkbox)
})
observe({
toggleCssClass(id = "checkbox2", class = ".blue",
condition = input$checkbox)
})
}
)
}
The demo model of shinyjs is found here: http://deanattali.com/shinyjs/overview#demo and it looks as if the toggleClass works there for the button with id "btn" but there is no code example directly to be found, and the indirect example from another section of the shinyjs page doesn't seem to work.
Option 3 I tried to have the style = "background-color: ....read R variable" part access an R variable that contains the color name, i.e. mycolor <- "red", but that doesn't work either, and my knowledge of javascript is too limited to figure out how to make that work.
So, .... if anyone has an idea how to make the color switching work with shinyjs, or with another method that works with my button coded above, I would highly appreciate it, and grant you my eternal gratitude. (been stuck on this for weeks now with this issue)
Mark
p.s. i've looked into bsButtons as well but they are too limited for what I want with the default class options.
That should be doable in "pure" shiny:
Use renderUI() to create the button and insert conditions to check if the button was clicked already.
I decided to store the information (whether a button was clicked) within a reactiveVariable as you wrote that you plan to trigger the color change "if a button is clicked, or a specific element (i.e. inputslider) changes that is linked to a button". So you could also change the global$clicked from other inputs.
library(shiny)
shinyApp(
ui = fluidPage(
uiOutput("button")
),
server = function(input, output) {
global <- reactiveValues(clicked = FALSE)
observe({
if(length(input$RunFullModel)){
if(input$RunFullModel) global$clicked <- TRUE
}
})
output$button <- renderUI({
if(!is.null(input$RunFullModel) & global$clicked){
actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"),
style = "color: white;
background-color: #35e51d;
position: relative;
left: 3%;
height: 35px;
width: 35px;
text-align:center;
text-indent: -2px;
border-radius: 6px;
border-width: 2px")
}else{
actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"))
}
})
}
)
How to edit the CSS to change the width of the progress-bar?
I put in
div.progress-bar{
width:100px
}
progress-bar{
width:100px
}
but it doesn't work.
Your bar has an Id = file1_progress so you can style that. Have a look at my example below, I set mine to 100px
rm(list = ls())
library(shiny)
ui <- fluidPage(
titlePanel("My R Shiny App"),
sidebarPanel(
fileInput('file', 'Choose file to upload.' ),width=3),
tags$style(type="text/css", "#file_progress { max-width: 100px; }")
)
server <- function(input, output, session) {}
shinyApp(ui, server)