cssrshinyback-button
How to add a back button in the top corner of the left page?
I am trying to add a back button to the top-corner of the left page, with a triangular form.
Here is a reproducible example of the Shiny app:
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100vh;
margin: 5px 0;
background-color: navy; /* Set background color for the body */
position: relative; /* Add position relative for the logo */
}
.input-container {
width: 100%;
text-align: center;
background-color: navy; /* Set background color for the input container */
padding: 20px; /* Add padding for better visibility */
}
.input-container input[type='text'],
.input-container input[type='number'],
.input-container .btn {
width: 100%;
padding: 15px;
margin: 5px 0;
box-sizing: border-box;
font-size: 18px;
text-align: center;
color: navy; /* Text color navy */
}
.input-container .btn {
margin-top: 20px;
color: white;
}
/* Style for Your Details text */
.details-container {
text-align: center;
}
.details-text {
color: white;
font-size: 24px;
margin-bottom: 15px;
text-align: center;
display: inline-block;
}
.logo {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 300px; /* Adjust the width of the logo */
height: auto; /* Maintain aspect ratio */
display: none; /* Initially hide the logo */
}
"))
),
titlePanel(" "),
uiOutput("page")
)
server <- function(input, output, session) {
output$page <- renderUI({
if (is.null(input$currentPage)) {
tagList(
div(class = "input-container",
actionButton("startButton", "START", style = "font-size: 50px;") # style = "font-size: 24px;"
),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
} else if (input$currentPage == "page2") {
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name", style = "background-color: lightblue; color: navy;"),
textInput("nationality", label = NULL, placeholder = "Nationality", style = "background-color: lightyellow; color: navy;"),
textInput("age", label = NULL, value = "", placeholder = "Age", style = "background-color: lightgreen; color: navy;"),
textInput("email", label = NULL, placeholder = "Email", style = "background-color: lightgray; color: navy;"),
actionButton("nextButton", "NEXT") # style = "font-size: 24px;"
),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
} else if (input$currentPage == "page3") {
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic"),
actionButton("intermediateButton", "Intermediate"),
actionButton("intermediatePlusButton", "Intermediate +"),
actionButton("notSureButton", "Not sure"),
actionButton("nextButtonPage3", "NEXT") # style = "font-size: 24px;"
),
tags$img(src ="www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
}
})
observeEvent(input$startButton, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name"),
textInput("nationality", label = NULL, placeholder = "Nationality"),
textInput("age", label = NULL, value = "", placeholder = "Age"),
textInput("email", label = NULL, placeholder = "Email"),
actionButton("nextButton", "NEXT") # style = "font-size: 24px;"
),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
})
})
observeEvent(input$nextButton, {
name <- input$name
nationality <- input$nationality
age <- input$age
email <- input$email
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
actionButton("nextButtonPage3", "NEXT") # style = "font-size: 24px;"
),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
})
})
}
shinyApp(ui, server)
And this is an example of the the "Back" button I need on each page, but starting with the second page, all the way to the other pages.
Is there a way to get this?
Solution
Here is one example for a back button in the corner similar to the one in your screenshot. You can of course edit the CSS in order to improve the example.
Notice that there are several repetitions inside your example which should be avoided. However, I did not refactor your code.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100vh;
margin: 5px 0;
background-color: navy; /* Set background color for the body */
position: relative; /* Add position relative for the logo */
}
.input-container {
width: 100%;
text-align: center;
background-color: navy; /* Set background color for the input container */
padding: 20px; /* Add padding for better visibility */
}
.input-container input[type='text'],
.input-container input[type='number'],
.input-container .btn {
width: 100%;
padding: 15px;
margin: 5px 0;
box-sizing: border-box;
font-size: 18px;
text-align: center;
color: navy; /* Text color navy */
}
.input-container .btn {
margin-top: 20px;
color: white;
}
/* Style for Your Details text */
.details-container {
text-align: center;
}
.details-text {
color: white;
font-size: 24px;
margin-bottom: 15px;
text-align: center;
display: inline-block;
}
.logo {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 300px; /* Adjust the width of the logo */
height: auto; /* Maintain aspect ratio */
display: none; /* Initially hide the logo */
}
div#corner-triangle {
display: block;
width: 100px;
height: 100px;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #ffffff transparent transparent transparent;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
color: white;
text-shadow: 0 0 25px 9px #fff;
}
"))
),
titlePanel(" "),
uiOutput("page")
)
server <- function(input, output, session) {
output$page <- renderUI({
if (is.null(input$currentPage)) {
tagList(
div(class = "input-container",
actionButton("startButton", "START", style = "font-size: 50px;") # style = "font-size: 24px;"
),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
}
})
observeEvent(input$startButton, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name"),
textInput("nationality", label = NULL, placeholder = "Nationality"),
textInput("age", label = NULL, value = "", placeholder = "Age"),
textInput("email", label = NULL, placeholder = "Email"),
actionButton("nextButton", "NEXT") # style = "font-size: 24px;"
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck1",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
})
})
observeEvent(input$nextButton, {
name <- input$name
nationality <- input$nationality
age <- input$age
email <- input$email
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
actionButton("nextButtonPage3", "NEXT") # style = "font-size: 24px;"
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
})
})
observeEvent(input$bck1, {
output$page <- renderUI({
tagList(
div(
class = "input-container",
actionButton("startButton", "START", style = "font-size: 50px;") # style = "font-size: 24px;"
),
tags$img(
src = "www/free_english_logo.png",
class = "logo",
width = "400px"
) # Adjust the width of the logo
)
})
})
observeEvent(input$bck2, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Your Details:"),
textInput("name", label = NULL, placeholder = "Name"),
textInput("nationality", label = NULL, placeholder = "Nationality"),
textInput("age", label = NULL, value = "", placeholder = "Age"),
textInput("email", label = NULL, placeholder = "Email"),
actionButton("nextButton", "NEXT") # style = "font-size: 24px;"
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck1",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
})
})
}
shinyApp(ui, server)
- Calculating using sass variables for properties with multiple values
- Vertical align in bootstrap table
- React Native Modal Transparent Not Working
- How to disable external CSS in browser for testing?
- How do I right align div elements?
- Html and css to add colorful codes
- How to insert a line break in ::before of an element using CSS and attr()
- Strange MUI Grid behavior when using spacing
- Background image in tailwindcss using dynamic url (React.js)
- how to get a full page web app even in safari?
- When hover over img, all other images blur using CSS :not(:hover)
- Bootstrap-Select : remove ugly focus border
- Pure CSS Continuous Horizontal Text Scroll Without Break
- Matter.js Mouse Controls Setup
- <li> style overrides css with flexslider
- How to change scrollbar when using Tailwind (next.js/react)
- How do you specify table padding in CSS? (table, not cell, padding )
- How to debug CSS?
- How do I create a css rule, to undo other background on a ::selection node
- Grid Styling - Overwrite style of ag-grid
- how to stop background-color: buttonface; on submit button?
- How (and why) to use CSS "display: table-cell"?
- How do I make a placeholder for a 'select' box?
- How to determine if CSS has been loaded?
- Why isn't my CSS animation-timeline: view() working?
- jQuery UI 1.10: dialog and zIndex option
- How can I move my hamburger menu to the top right?
- How to keep a HTML Submenu Opened When Clicking on Other
- How to implement a language selector via JS that overrides global CSS
- Why is Chrome rendering the Font in "extra light" and Safari not?