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.
Related
Here is a simple example of a navigation list panel:
library(shiny)
ui <- fluidPage(
titlePanel("Navlist panel example"),
navlistPanel(
"Header",
tabPanel("First",
h3("This is the first panel")),
tabPanel("Second",
h3("This is the second panel")),
tabPanel("Third",
h3("This is the third panel"))
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
I need the well (AKA the grey rectangle with rounded corners that is around the navigation list) to be taller and expand to take the white space marked by the red rectangle:
Image
There is no argument in the navlistPanel() function to do this (there is only the width argument)
I would go with something as follow, adding a style tag and adding custom height to the .row element.
library(shiny)
ui <- fluidPage(
titlePanel("Navlist panel example"),
tags$style(".row{height: 500px;} .row div:nth-child(1){height: 100%;}"),
navlistPanel(
"Header",
tabPanel("First",
h3("This is the first panel")),
tabPanel("Second",
h3("This is the second panel")),
tabPanel("Third",
h3("This is the third panel"))
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
PS: be aware that you can have multiple rows in your app
The following code can be used to show how I would want a tooltip to appear. If version=3 then the function in shinyBS works and produces the tooltip. However with version=4 it does not work. I don't want to use the shinyBS package as it seems it's still in dev mode and would rather just straight prefer to wrap my button with some HTML using tooltips from bootstrap directly as shown here.
I'm not having success in doing it this way and wonder if anyone can suggest a good way to get the tool top for my button just using the pure HTML?
library(shiny)
library(bslib)
library(shinyBS)
ui <- fluidPage(
navbarPage(
theme = bs_theme(bootswatch = "flatly", version = 4),
title = 'Methods',
tabPanel('One'),
),
mainPanel(
h1('Hello World'),
actionButton("button", "Some Button"),
bsTooltip("button", "Something to be said here", "top"),
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
I have three input controls and want to align one at the left side and two at the right side of the page in a shiny application. Furthermore, the two selectInput controls have to be side by side which I solved using the code fome this answer.
Using column's and align = "right" I'm able to get what I want. The problem is that the text as well as the select arrow is also right-aligned, which is looking awful (see picture and highlighted area below).
Is there another way to achieve the expected alignment?
library(tidyverse) # loaded for the words data.frame
library(shiny)
ui <- fluidPage(
navbarPage(
set.seed(1233),
fluidRow(
column(8,radioButtons("plot", "", choices = list("Cluster"="1","Correlation"="2"), inline=T)),
column(4, align = "right",
div(style="display: inline-block;vertical-align:top; width: 120px;",
selectInput("Something","Something", choices = sample(words, 5))),
div(style="display: inline-block;vertical-align:top; width: 120px;",
selectInput("Else","else", choices = sample(words, 6))))
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
I can't give you advice for best practice of alignment, but in this case, you can add
text-align:left !important;
to your style args
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..)