I would like to adapt the size/height of the navbarPage Menue since it is occupying a lot of space.
I tried working with some CSS style adaption but since I am new to that I am struggling a little bit.
This is how it looks at the moment:
Example Image
And this is the corresponding ui:
shinyUI(fluidPage(
shinyjs::useShinyjs(),
navbarPage(
title = h4(style="text-align:center", "Man vs. Machine"),
tabPanel(h4(style="text-align:center","Voting"),
tags$style("
.col-sm-8 { /* radioButtons is a div class*/
margin-top: 20px;
}"),
fluidRow(column(12,h4("Click the Hydrograph you prefer?")))),
fluidRow(tableOutput("select")),
tabPanel(h4(style="text-align:center","Results"),
fluidRow(column(2, textOutput("value"))),
fluidRow(column(2, textOutput("value2")))))))
Related
Here is a very simple example of two collapsible panels and I would like to add an icon like an arrow or something to show that it is able to collapse.
library(shinyBS)
shinyApp(
ui =
fluidPage(
bsCollapse(id = "collapseExample", open = c("panel 1, panel 2"),
bsCollapsePanel("panel 1", "First panel content",
style = "info"),
bsCollapsePanel("panel 2", "Second panel content",
style = "warning"))
),
server =
function(input, output, session){
}
)
Also if anyone knows a way to change the css styling of the panels (like color, font size, font, text alignment, background color, etc) that would be awesome!
I did it outside Shiny in this fiddle that allows you to experiment with Bootstrap (which is the underlying basis of shinyBS).
I used this CSS.
<style>
.panel-heading .panel-title a.collapsed:after {
transform: rotate(180deg);
transition: .5s ease-in-out;
}
.panel-heading .panel-title a:after {
content:'⏶';
text-align: right;
float:right;
transition: .5s ease-in-out;
}
.panel-heading .panel-title a:not([class]):after {
transform: rotate(180deg);
}
</style>
The CSS uses the :after selector to place an arrow (as content) behind and displays it on the right-hand side of the panel (i.e. float and text-align). The other two specs a:not([class]) and a.collapsed make sure that the arrow always points into the right direction. The transitions are for show.
Place this CSS inside a tags$head element (instructions here) and it should style your panels accordingly. The head of your sample app should look like this:
shinyApp(
ui =
fluidPage(
tags$head(
# Note the wrapping of the string in HTML()
tags$style(HTML("
<!-- PUT THE CSS HERE without the surrounding <style> tag -->
")),
bsCollapse(id = "coll...
I admit I haven't tested it in a Shiny environment (only in the bootstrap fiddle). But since shinyBS is only a wrapper for Bootstrap it should work.
You can also just put a fontawesome icon next to the title "Panel 1" and "Panel 2".
library(shinyBS)
library(shiny)
shinyApp(
ui =
fluidPage(
bsCollapse(
id = "collapseExample", open = c("panel 1, panel 2"),
bsCollapsePanel(
title = div("Panel 1", icon("angle-down")), "First panel content",
style = "info"),
bsCollapsePanel(
title = div("Panel 2", icon("angle-down")), "Second panel content",
style = "warning"))
),
server =
function(input, output, session){
}
)
I'm using documentation https://shiny.rstudio.com/tutorial/written-tutorial/lesson2/ and more precisely the following code to add a simple paragraph to my shiny page:
ui <- fluidPage(
titlePanel("My Shiny App"),
sidebarLayout(
sidebarPanel(),
mainPanel(
p("p creates a paragraph of text."),
p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
strong("strong() makes bold text."),
em("em() creates italicized (i.e, emphasized) text."),
br(),
code("code displays your text similar to computer code"),
div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
br(),
p("span does the same thing as div, but it works with",
span("groups of words", style = "color:blue"),
"that appear inside a paragraph.")
)
)
)
My goal is to take any of these paragraphs, let's say the last one, and display it like inside a box the same way we can see it here:
http://www.sthda.com/english/articles/40-regression-analysis/168-multiple-linear-regression-in-r/
where it says "library(tidyverse)", this paragraph is inside a box with a different background color.
Does anyone know how I can achieve that?
I don't know much about HTML hence the hard time I'm facing.
Thank you
It's not about HTML it's CSS what you should look for. (;
For example you could copy & paste the CSS styling rules from the webpage you linked into you shiny app (not the recommend way but quick & dirty) to change the appearance of the code tag like so:
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("
code {
display:block;
padding:9.5px;
margin:0 0 10px;
margin-top:10px;
font-size:13px;
line-height:20px;
word-break:break-all;
word-wrap:break-word;
white-space:pre-wrap;
background-color:#F5F5F5;
border:1px solid rgba(0,0,0,0.15);
border-radius:4px;
font-family:monospace;
}"))),
titlePanel("My Shiny App"),
sidebarLayout(
sidebarPanel(),
mainPanel(
p("p creates a paragraph of text."),
p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
strong("strong() makes bold text."),
em("em() creates italicized (i.e, emphasized) text."),
br(),
code("code displays your text similar to computer code"),
div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
br(),
p("span does the same thing as div, but it works with",
span("groups of words", style = "color:blue"),
"that appear inside a paragraph.")
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
I have a very basic Shiny app.
ui.R:
library(shiny)
shinyUI(fluidPage(
titlePanel("Average Run Length Simulation"),
fluidRow(
tabsetPanel(
tabPanel("Shewhart v. Shewhart",
fluidRow(
column(4,"Rule"),
column(2,"Group 1"),
column(2,"Group 2")
),
fluidRow(
column(4,"1 point more than k sigma away from mean"),
column(2,
checkboxInput("svsg1r1",label=" ",value=F),
numericInput("svsg1k1",label=" ",value=3,min=1,step=1)
),
column(2,
checkboxInput("svsg2r1",label=" ",value=F),
numericInput("svsg2k1",label=" ",value=3,min=1,step=1)
)
)
)
)
)
))
The server.r file is the basic one created by Rstudio in a new project.
What I really want is a tabular layout of widget elements, but, I don't think I'll get that without a lot of work and this isn't worth it. So, instead, I want to reduce the width of the numericInput() boxes akin the the size attribute of an <input> element in an HTML form.
How would I do this in shiny? Is there a standard way to apply css/html specifics to particular elements?
This works, though it's global css and I'd rather have element specific. I added this inside the fluidPage() element in ui.r and it resized both boxes.
tags$head(
tags$style(HTML("
input[type=\"number\"] {
width: 100px;
}
"))
)
For a numericInput box specific resizing, you can use the CSS id selector. In the example above, the following should work to just resize the first box.
tags$head(
tags$style(HTML("
#svsg1k1 {
width: 100px;
}
")))
Is it possible to scroll a wellPanel or column?
I have a simple ui scheme here.
shinyUI(
fluidPage(
sidebarLayout(
sidebarPanel(
wellPanel(),
wellPanel()
),
mainPanel(
fluidRow(
column(3,
wellPanel()
)
)
)
)
)
)
I would like to make some of those wellPanels (with forms inside) scrollable.
I tried adding this piece of code seen below under 'sidebarPanel(', but that made my whole sidebarpanel to scroll. I am looking to make a 'wellPanel' or a 'column' scrollable.
tags$head(tags$style(
type = 'text/css',
'form-group { max-height: 600px; overflow-y: auto; }')
Thanks
Thanks to Carlos Sanchez, here is the answer:
wellPanel(id = "tPanel",style = "overflow-y:scroll; max-height: 600px",
other-stuff..)
I want to change the height of the select dropdown in shiny app. The default height displays about 8 options, I would like to see more. It is possible to increase the number of options by decreasing the line height of dropdown, but that is not an optimal solution for me. I searched a lot about how to do it, looked into selectize.js code and my current hypothesis is that either this is trivial, or impossible by design.
What I've learned is that the displayed dropdown from select is a div of class .selectize-dropdown-content, but changing its height and width attributes does not change anything. It is possible to change the background color though. Here is my single file shiny app code:
server <- function(input, output) {
output$distPlot <- renderPlot({
plot(0.5,0.5,xlim=c(0,1),ylim=c(0,1))
text(0.5,0.5,input$Letter)
})
}
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(
selectizeInput("Letter", "", setNames(letters,letters),selected="a",multiple=FALSE),
tags$style(type='text/css',
".selectize-dropdown-content {
height: 600 px;
width: 700 px;
background-color: #b0c4de;
}")
),
mainPanel(plotOutput("distPlot"))
)
))
shinyApp(ui = ui, server = server)
So my question is, whether I am modifying the css of the correct element, or is changing of dropdown height is not possible in selectize.js?
Got the solution, few minutes after posting the question. The height of select dropdown is controlled by max-height attribute. The following css does the trick:
tags$style(type='text/css', ".selectize-dropdown-content {max-height: 400px; }"),