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
Related
The Shinyglide package is just what I need, using a carousel for grouped radio buttons giving the user many choices for data parsing.
However, the "Next" (and "Back") button occupies a large white space. I'd like to shift the button in line with the glide row (see image at bottom). Does anyone know how to do this? Is there a CSS trick? Reading through the Glide manual, the only choices are "top" and "bottom".
If moving the Next/Back button isn't possible, a secondary option is to insert (a somewhat superfluous) line of text but in line with the Next/Back buttons, to at least cover up the annoyingly large white space.
The actual panel this is for has much more information presented than in this example, so I'm trying to make the page as clean as possible.
Please see image at bottom that better explains what I'm trying to do.
Reproducible example:
library(dplyr)
library(DT)
library(shiny)
library(shinyglide)
ui <-
fluidPage(
fluidRow(div(style = "margin-top:15px"),
strong("Input choices shown in row below, click ´Next´ to see more choices:"),
column(12, glide(
height = "25",
controls_position = "top",
screen(
div(style = "margin-top:10px"),
wellPanel(
radioButtons(inputId = 'group1',
label = NULL,
choiceNames = c('By period','By MOA'),
choiceValues = c('Period','MOA'),
selected = 'Period',
inline = TRUE
),
style = "padding-top: 12px; padding-bottom: 0px;"
)
),
screen(
div(style = "margin-top:10px"),
wellPanel(
radioButtons(inputId = 'group2',
label = NULL,
choiceNames = c('Exclude CT','Include CT'),
choiceValues = c('Exclude','Include'),
selected = 'Exclude',
inline = TRUE
),
style = "padding-top: 12px; padding-bottom: 0px;"
)
)
)
)
),
DTOutput("plants")
)
server <- function(input, output, session) {
output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}
shinyApp(ui, server)
You could use a custom control element with custom_controls, and then have it hover over the displayed screen on the top right with a container set to absolute positioning. Setting a limited width for the container will ensure that the back button won't fly too far out.
Something along these lines:
glide(custom_controls = div(class = "glide-controls", glideControls()), ...)
# Somewhere in the UI
tags$style(
".glide-controls { position: absolute; top: 18px; right: 15px; width: 160px; }"
)
Just make sure to also set controls_position = "bottom" so that the controls hover over the screen content, rather than under it.
A minimal example app:
library(shiny)
library(shinyglide)
ui <- fixedPage(
h3("Simple shinyglide app"),
tags$style(
".glide-controls { position: absolute; top: 18px; right: 15px; width: 160px; }"
),
glide(
custom_controls = div(class = "glide-controls", glideControls()),
screen(wellPanel(p("First screen."))),
screen(wellPanel(p("Second screen.")))
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
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 try to make a loading screen as in this nice example http://daattali.com:3838/loading-screen/. Unfortunately I cannot figure out how to do exactly the same effect with 'navbarPage'.
In this slightly modified app below there are two tab panels called "start" and "end". When the app starts none of the tab panels are active. One have to quickly click on the first tab to see the loading screen but this is not what I would like. Is there a way to make it so quick and easy as in the mentioned example?
Thank you for the help!
library(shinyjs)
appCSS <- "
#loading-content {
position: absolute;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"
shinyApp(
ui = navbarPage(
useShinyjs(),
inlineCSS(appCSS),
tabPanel(title = "Start",
# Loading message
div(
id = "loading-content",
h2("Loading...")
),
# The main app code goes here
div(
id = "app-content",
p("This is a simple example of a Shiny app with a loading screen."),
p("You can view the source code",
tags$a(href = 'https://github.com/daattali/shiny-server/blob/master/loading-screen',
"on GitHub")
)
)
),
tabPanel(title = "End",
h2("Second tab"))
),
server = function(input, output, session) {
# Simulate work being done for 1 second
Sys.sleep(2)
# Hide the loading message when the rest of the server function has executed
hide(id = "loading-content", anim = TRUE, animType = "fade")
}
)
EDIT: The original link to the loading screen app has been taken down. It can now be accessed on github here
Well, I believe that you will enjoy with this solution but it is not perfect. The key is the tagList, you can add whatever you want before the navbar.
Furthermore I add the padding to your CSS code and now, there is a title in the navbar.
Unfortunately the navbarPage is not possible to hide of a not complex way.
library(shiny)
library(shinyjs)
appCSS <- "
#loading-content {
position: absolute;
padding: 10% 0 0 0;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"
shinyApp(
ui =
tagList(
useShinyjs(),
inlineCSS(appCSS),
# Loading message
div(
id = "loading-content",
h2("Loading...")
),
navbarPage("Test",
tabPanel(title = "Start",
# The main app code goes here
div(
id = "app-content",
p("This is a simple example of a Shiny app with a loading screen."),
p("You can view the source code",
tags$a(href = 'https://github.com/daattali/shiny-server/blob/master/loading-screen',
"on GitHub")
)
)
),
tabPanel(title = "End",
h2("Second tab"))
) #close navbarPage
), #close tagList
server = function(input, output, session) {
# Simulate work being done for 1 second
Sys.sleep(5)
# Hide the loading message when the rest of the server function has executed
hide(id = "loading-content", anim = TRUE, animType = "fade")
}
)
I am writing an app and I want the image in the sidebarPanel to be just a bit bigger than the image I put inside it. As the window gets smaller or larger, so does the sidebar, but the image stays static. How do I fix this problem? Is there a way to get the sidebar length or is there a better way to render images?
ui.R
library(shiny)
shinyUI(bootstrapPage(
# Application title
titlePanel("Sidebar Image App"),
sidebarPanel(
imageOutput("image", height = "auto")
)
))
server.R
library(shiny)
shinyServer(function(input, output, session) {
output$image <- renderImage({
return(list(
src = "one.png",
contentType = "image/png",
height = 185,
alt = "Face"
))
})
})
You can style the image using css tag as below:
shinyUI(bootstrapPage(
titlePanel("Sidebar Image App"),
tags$head(tags$style(
type="text/css",
"#image img {max-width: 100%; width: 100%; height: auto}"
)),
sidebarPanel(
imageOutput("image")
)
)),
where css id selector (here #image) should correspond to the outputId of the imageOutput.
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..)