I have an R Shiny application with four rows. The first and third row consist of selectInput dropdowns, whereas the second and fourth rows consist of text output.
The application looks like this:
I would like to eliminate the space (margin-bottom) between the first and second row while keeping all other distances in the application the same. To be clear, this means the space between the third and fourth rows should still exist after the solution.
Here is the code to render the application:
ui <- shiny::navbarPage(
shiny::tabPanel(title = "My Tab",
value = "my-tab",
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "panel1",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn.btn-default.active { background-color: white; }"),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "c1",
label = "Condition 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c2",
label = "Condition 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c3",
label = "Condition 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c4",
label = "Condition 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c5",
label = "Condition 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c6",
label = "Condition 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "condition-words-1", "Condition words 1")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-2", "Condition words 2")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-3", "Condition words 3")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-4", "Condition words 4")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-5", "Condition words 5")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-6", "Condition words 6"))
),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "i1",
label = "Item 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i2",
label = "Item 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i3",
label = "Item 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i4",
label = "Item 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i5",
label = "Item 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i6",
label = "Item 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "item-words-1", "Item words 1")),
shiny::column(width = 2,
htmltools::p(id = "item-words-2", "Item words 2")),
shiny::column(width = 2,
htmltools::p(id = "item-words-3", "Item words 3")),
shiny::column(width = 2,
htmltools::p(id = "item-words-4", "Item words 4")),
shiny::column(width = 2,
htmltools::p(id = "item-words-5", "Item words 5")),
shiny::column(width = 2,
htmltools::p(id = "item-words-6", "Item words 6"))
)
) # ** End absolute panel ** #
) # ** End Tab ** #
) # ** End UI function ** #
server <- function(input, output, session) { }
shinyApp(ui, server)
I have used the google chrome inspect tool to try to implement CSS to solve this issue, but I can't seem to figure it out.
Your assistance will be greatly appreciated!
CodePudding user response：
You are on the right track - margin-bottom / margin-top does what you want:
ui <- shiny::navbarPage(
shiny::tabPanel(title = "My Tab",
value = "my-tab",
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "panel1",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn.btn-default.active { background-color: white; }"),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "c1",
label = "Condition 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c2",
label = "Condition 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c3",
label = "Condition 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c4",
label = "Condition 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c5",
label = "Condition 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c6",
label = "Condition 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "condition-words-1", "Condition words 1")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-2", "Condition words 2")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-3", "Condition words 3")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-4", "Condition words 4")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-5", "Condition words 5")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-6", "Condition words 6"))
),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "i1",
label = "Item 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i2",
label = "Item 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i3",
label = "Item 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i4",
label = "Item 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i5",
label = "Item 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i6",
label = "Item 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "item-words-1", "Item words 1")),
shiny::column(width = 2,
htmltools::p(id = "item-words-2", "Item words 2")),
shiny::column(width = 2,
htmltools::p(id = "item-words-3", "Item words 3")),
shiny::column(width = 2,
htmltools::p(id = "item-words-4", "Item words 4")),
shiny::column(width = 2,
htmltools::p(id = "item-words-5", "Item words 5")),
shiny::column(width = 2,
htmltools::p(id = "item-words-6", "Item words 6"))
)
) # ** End absolute panel ** #
) # ** End Tab ** #
) # ** End UI function ** #
server <- function(input, output, session) { }
shinyApp(ui, server)
Using margin-top:
library(shiny)
ui <- shiny::navbarPage(
shiny::tabPanel(title = "My Tab",
value = "my-tab",
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
shiny::absolutePanel(id = "panel1",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn.btn-default.active { background-color: white; }"),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "c1",
label = "Condition 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c2",
label = "Condition 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c3",
label = "Condition 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c4",
label = "Condition 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c5",
label = "Condition 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c6",
label = "Condition 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "condition-words-1", "Condition words 1"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-2", "Condition words 2"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-3", "Condition words 3"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-4", "Condition words 4"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-5", "Condition words 5"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-6", "Condition words 6"),
style = "margin-top:-15px;")
),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "i1",
label = "Item 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i2",
label = "Item 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i3",
label = "Item 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i4",
label = "Item 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i5",
label = "Item 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i6",
label = "Item 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "item-words-1", "Item words 1")),
shiny::column(width = 2,
htmltools::p(id = "item-words-2", "Item words 2")),
shiny::column(width = 2,
htmltools::p(id = "item-words-3", "Item words 3")),
shiny::column(width = 2,
htmltools::p(id = "item-words-4", "Item words 4")),
shiny::column(width = 2,
htmltools::p(id = "item-words-5", "Item words 5")),
shiny::column(width = 2,
htmltools::p(id = "item-words-6", "Item words 6"))
)
) # ** End absolute panel ** #
) # ** End Tab ** #
) # ** End UI function ** #
server <- function(input, output, session) { }
shinyApp(ui, server)