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..)
Related
I am trying to create a Shiny app that has dynamically generated UI input options in the sidebarPanel that generate plots in the mainPanel. In the actual code, sidebarPanel and mainPanel are significantly longer than most displays will allow. Because of this, I would like them to scroll independently while displaying the titlePanel at the top.
A minimal reproducible example is below. I've manually defined the max-height at 925 px. This works fine for browsers on 1080p, but on a 1440p display it looks a little silly as the max-height parameter makes the sidebar scroll at 925px still. If I set the max-height: 100%, the overflow doesn't work at all and only the main page scrolls. How can I get independently scrolling sidebarPanel and mainPanel that are dynamically sized to the browser window?
ui = fluidPage (
titlePanel("Test Server"),
sidebarLayout(position = "right",
sidebarPanel(
width = 2,
style = paste0("overflow-y: scroll;
max-height: 925px;"),
tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
),
mainPanel(
width = 10,
style = paste0("overflow-y: scroll;
max-height: 925px;"),
tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
)
)
)
server = function(input, output) {
}
shinyApp(ui = ui, server = server)
taken the idea from here your code can be adjusted to achieve independent scrolling of the two panels!
Best regards,
Lea
ui = fluidPage (
titlePanel("Test Server"),
sidebarLayout(position = "right",
sidebarPanel(
width = 2,
style = paste0("height: 90vh; overflow-y: auto;"), ##CHANGE
tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
),
mainPanel(
width = 10,
style = paste0("height: 90vh; overflow-y: auto;"),##CHANGE
tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
tags$html(tags$h1("This")),tags$html(tags$h1("is")),tags$html(tags$h1("dummy")),tags$html(tags$h1("content")),tags$html(tags$h1("to")),tags$html(tags$h1("force")),tags$html(tags$h1("the")),tags$html(tags$h1("page")),tags$html(tags$h1("to")),tags$html(tags$h1("scroll")),
)
)
)
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.
Similar to the dropdownMenu and messageItem functions which are available in shinydashboard I would like to show message items on the right hand side of the navbar in a navbarPage based app. Example of the related functions here: https://rstudio.github.io/shinydashboard/structure.html
I have tried inserting the same funcitons into a navbarPage app but it is not working as expected- not right aligned.
As a very basic reproducible example, this is the structure of my app with my attempt at including the message item:
library(shiny)
library(shinydashboard)
ui <- shinyUI(
navbarPage("Navbar!",
tabPanel("Plot",
sidebarLayout(
sidebarPanel(),
mainPanel()
)
),
tabPanel(
dropdownMenu(type = "messages",
messageItem(
from = "Sales Dept",
message = "Sales are steady this month."
)
)
)
)
)
server = function(input, output) { }
shinyApp(ui = ui, server = server)
I'm not the best at css, but this is a start to getting the result you're looking for. Change the UI to:
ui <- shinyUI(
fluidPage(
tags$head(
tags$style(HTML("
.navbar-nav .messages-menu a {padding-top: 0px; padding-bottom:0px}
.navbar-nav {width: 90%}
.navbar-nav .messages-menu {float: right; padding-top: 25px;}
"))
),
navbarPage("Navbar!",
tabPanel("Plot",
sidebarLayout(
sidebarPanel(),
mainPanel()
)
),
tabPanel(
dropdownMenu(type = "messages",
messageItem(
from = "Sales Dept",
message = "Sales are steady this month."
)
)
)
)
)
)
The width sets the class navbar-nav to 90% of the width of the screen since it is the space that contains both tab panels but not the label "Navbar!", and the second line takes the class messages-menu within navbar-nav and shifts it to the right of the space filled by navbar-nav (hence why we had to extend the width to include all of the header not occupied by the label; this percentage would likely have to change depending on the text input that is in place of "Navbar!").
I am trying to display an image on the left or right corner and the title in the center on same height. I tried the following code, however, I get the image and title on two different heights. I want to display both side by side.
server.r
shinyServer(function(input, output, session){
})
ui.r
shinyUI(fluidPage(
titlePanel(
headerPanel( title=div(img(src="bigorb.png", height = 100, width = 100),
h3("Image Display Test", align="center", style="bold")
))
)
))
and it displays
You can try to do something like this:
library(shiny)
ui <- shinyUI(fluidPage(shinyjs::useShinyjs(),
tags$link(rel = "stylesheet", type = "text/css", href = "custom-div.css"),
h3(
div(style="display:inline-block;",img(src="bigorb.png", height = 150, width = 150,style="left;")),
div(id="smile","Image Display Test")
),
br(),
sidebarLayout(
sidebarPanel(
textInput("length",
"Enter your length:"),
textInput("weight",
"Enter your weigth:")
),
mainPanel(
htmlOutput("testHTML")
)
)
))
and the .css file. You can find all info that you need about .css file in shiny R here.
#smile {
position: absolute;
width: 300px;
height: 150px;
left: 50%;
margin: -100px 0 0 -150px;
}
I hope it works for you all and keep coding!
PS: I just followed this post
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;
}
")))