How to adjust the sizes of the boxes and spaces between them?

Issue

I have issues with the sizes of the boxes within my Shiny app and I also have some issues with spaces as well.

Here is a reproducible shiny code:

    library(shiny)

# Define the logo URL


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)

Now if you run the code above in R this is what you'll get:

But I want:

1. a bit more space yet equal space between the first 4 boxes
2. and want them longer like the second page
3. the NEXT button should be shorter and lower than all four boxes.

Here is an example of how I want my boxes:

1st pict:

2nd pict - that shows the how long I want the boxes, the same as the second page boxes:

Now with the second page, I have similar issues :

1. with the space in between the boxes - first three boxes "Begginer" , "Intermediate" and "Intermidiate+" to have the same space (but want a bit wider than as it is now). And the last button to be equal distance between "Not sure?"

This is what I have now

And I want it like this:

Is there a way to achieve these sizes and spaces with shiny app or even css?

Solution

Below is an example which should be similar to the one as given in your provided screenshots. I commented the relevant css parts, you can edit them for increasing or decreasing the margin and width of the input-containers and buttons.

library(shiny)

# Define the logo URL


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 */
        width: 600px; /* larger inputs as desired */
      }
      .input-container input[type='text'],
      .input-container input[type='number'],
      .input-container .btn {
        width: 100%;
        padding: 15px;
        margin: 15px 0;  /* increased from 5 to 15 for more space */
        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 */
      }
      .form-group {
        margin-bottom: 50px; /* larger space to next element */
      }
      .shiny-input-container:not(.shiny-input-container-inline) {
        width: 600px;   /* larger inputs as desired */
        max-width: 100%;
      }
      #nextButton, #nextButtonPage3 {
        width: 200px;   /* shorter than the other buttons */
        background-color: green; /* like in the screenshot */
        margin-top: 60px; /* larger space to above */
      }
      #notSureButton {
        margin-top: 60px;   /* larger space to above */
      } 
      #startButton {
        width: 300px; /* width of the start button, separately defined */
      }
    "))
    ),
    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)

Answered By - Jan