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;
}
")))
Related
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)
In the Shiny package of R, how can you make the text in the titlePanel be centred on the top of the page?
Here is an example of what I mean
The only code I've used for the titlePanel is:
ui <- fluidPage(
titlePanel("How to Centre Me??")
When I look at the documentation, the only variables the function takes is:
titlePanel(title, windowTitle = title)
So is it possible to centre the title?
Thanks
In case anyone is still in need of a simple solution:
titlePanel(
h1("First level title", align = "center")
)
You can use column() function.
like this:
fluidPage(
column(3,offset = 4, titlePanel("How to Centre Me??"))
)
where 3 is column width and offset you can adjust according to your requirement.
With css:
ui <- fluidPage(
tags$head(
tags$style(
".title {margin: auto; width: 200px}"
)
),
tags$div(class="title", titlePanel("Centered title"))
)
Or you could just give up on the titlePanel() which is usually centered over the sidebar and just do this:
titlePanel(""),
sidebarLayout(
sidebarPanel(
),
mainPanel(
h1("This is my title now")
)
Not elegant but oh-so-easy.
If you're using a navbarPage() you should you the header=h1("title",align="center") and footer('same syntax as header') arguments.
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 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")))))))
By default, using navbarPage() in shiny creates a 'static top' bootstrap page (example). If I were writing the html for a webpage, I could add a <ul> element with a class of nav navbar-nav navbar-right where the navbar-right would move the tabs/menus to the right side of the navbar.
There doesn't seem to be a way to coerce this behavior directly through the framework - is there a clever known way to accomplish this?
The solution provided by K. Rohde, especially the edit, works for keeping it nearly pure Shiny. I discovered the insertAdjacentHTML javascript function and used it to create a right-hand text label. I guess it should be possible to make tabs that Shiny knows about and can use. In my case, I was wanting to put version information on the navbar, on the right-hand side. So, adding the disabled class was to avoid confusion.
library(shiny)
app <- shinyApp(
ui = shinyUI(
fluidPage(
navbarPage("Site Title",
tabPanel("v0.1"),
tabPanel("tab1"),
tabPanel("tab2")
),
HTML("<script>var parent = document.getElementsByClassName('navbar-nav');
parent[0].insertAdjacentHTML( 'afterend', '<ul class=\"nav navbar-nav navbar-right\"><li class=\"disabled\">v0.1</li></ul>' );</script>")
)
),
server = function(input, output, session){}
)
runApp(app)
You can use shinyjs package
library(shiny)
ui <- shinyUI(
navbarPage(
'Test',
id = 'menus',
tabPanel('Test',
shinyjs::useShinyjs()),
tabPanel("Summary"),
tabPanel("Table", value = 'table')
))
server <- function(input, output, session) {
shinyjs::addClass(id = "menus", class = "navbar-right")
}
shinyApp(ui, server)
Depends on how low your expectations are.
You can add css to your UI which aligns either your tabsets or your header to the right. Code:
app <- shinyApp(
ui = shinyUI(
fluidPage(
tags$head(
tags$style(HTML("
.navbar .navbar-nav {float: right}
.navbar .navbar-header {float: right}
"))
),
navbarPage("header",
tabPanel("tab1"),
tabPanel("tab2")
)
)
),
server = function(input, output, session){}
)
runApp(app)
Edit: The header argument of navbarPage also accepts regular div-containers. (E.g. a logo instead of plain text.) This can be exploitet to fill whole UI-Elements (e.g. buttons) into the header spot. Then of course you can float that to the right, while your tabs are aligned to the left.