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)
- Why anchor tag does not take height and width of its containing element
- Add <style> element to an HTML using Python Dominate library
- how to remove blue background on chrome autocomplete
- How do I use variable fonts with Google Fonts?
- JS manipulates the DOM, then CSS doesn't load properly on refresh, even though cache is disabled
- Align section heading with the first content item instead of centering in Flexbox layout
- Get rid of spaces between spans
- Remove button when logged in (wordpress)
- Is border-image possible in Tailwind?
- How to strike through obliquely with css
- CSS cross through an element
- Is pop-out effect using blob svg achievable?
- How to set borders between children from parent in CSS?
- Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
- How do CSS triangles work?
- Making planets follow their orbit in HTML/CSS
- How to make row scroll (overflow) on x axis when reach max width
- Why is CSS flex not working when deployed?
- Radial progress bar using TailwindUI
- Column of h2 elements takes width of the biggest, how to prevent?
- HTML5 and CSS grid - Can't get it to fit the content
- How to disable scroll without hiding it?
- Tailwind CSS "justify-center" works if used with "flex-row" but doesnt work with "flex-col"
- How can I change the color of an 'svg' element?
- How to control website tinting in Safari 15
- How do you prevent header tags from stretching across the body width
- Dark mode flickers a white background for a millisecond on reload
- How can I set "cursor: pointer" on Vuetify v-data-table rows? (expanded item area excluded)
- How can I inspect the shadow DOM of native controls in Chrome developer tools?
- 100vh height when address bar is shown - Chrome Mobile