How to add padding between regular button and actionButton in shinyApp? - html

Question

I have 2 individual (differently styled) buttons in my shiny App that unfortunately have no vertical padding between them. One of them is a simple HTML button while the other is a shiny actionButton.
I have tried using tags$style but don't think I am using it correctly. My code for the relevant parts are
HTML('<button data-toggle="collapse" data-target="#addtools">Additional tools</button>'),
tags$div(id = 'addtools', class="collapse",
checkboxInput("cluster", "Cluster customers", value = TRUE),
checkboxInput("circle", "Add circles", value = FALSE),
conditionalPanel("input.circle",
selectInput("sizes", "Radius:",
c("5 miles" = "5",
"10 miles" = "10",
"20 miles" = "20"))
)
),
actionButton("runfilters", label = "Apply filters")
The entire UI part of this file is:
tabPanel("Map",
div(class="outer",
tags$head(
includeCSS("styles.css"),
includeScript("gomap.js")
),
leafletOutput(outputId = "map", width = "100%", height = "100%"),
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
width = 330, height = "auto",
h2("Select your filters:"),
selectInput("level",
"Detail level:",
c("Customer level", "County level"),
selected = "County level"),
selectInput("mapstates","States:", c("All states"="",
structure(state.abb, names=state.name),
"Washington, DC"="DC"),
multiple = TRUE
),
conditionalPanel("input.mapstates",
selectInput("mapcounties", "Counties", c("All counties"=""),
multiple = TRUE
)
),
radioButtons("retailcorrection","Customer ownership:",
c("Private",
"Public"),
selected = "Private",
inline = TRUE),
conditionalPanel("input.level == 'Customer level'",
selectInput("var",
label = "Customer type:",
choices = c("ALL",
"ESSENTIAL",
"NON-ESSENTIAL"),
selected = "ALL"
),
radioButtons("custoporoh","Widget Category:",
c("Widget A",
"Widget B"),
selected = "Widget A",
inline = TRUE),
conditionalPanel("input.custoporoh == 'Widget A'",
numericInput("oprange",
label = "Minimum average monthly Widget A ordering (in dosage units):",
min = 0, max = 1000000, value = 0
),
numericInput("opprange",
label = "Minimum average monthly Widget A ordering as a percentage of total ordering:",
min = -1, max = 1, value = -1
)
),
conditionalPanel("input.custoporoh == 'Widget B'",
numericInput("ohrange","Minimum average monthly Widget B ordering (in dosage units):",
min = 0, max = 1000000, value = 0
),
numericInput("ohprange",
label = "Minimum average monthly Widget B ordering as a percentage of total ordering:",
min = -1, max = 1, value = -1
)
),
HTML('<button data-toggle="collapse" data-target="#addtools">Additional tools</button>'),
tags$div(id = 'addtools', class="collapse",
checkboxInput("cluster", "Cluster customers", value = TRUE),
checkboxInput("circle", "Add circles", value = FALSE),
conditionalPanel("input.circle",
selectInput("sizes", "Radius:",
c("5 miles" = "5",
"10 miles" = "10",
"20 miles" = "20"))
)
)
),
conditionalPanel("input.level == 'County level'",
selectInput("countyvar",
label = "Customer type:",
choices = c("ALL",
"ESSENTIAL"),
selected = "ALL"
),
selectInput("year", "Year:",
choices = c("2006","2007","2008","2009","2010","2011", "2012",
"2013","2014","2015","2016","2017","2018", "All years" = "2019"),
selected = "2019"
),
radioButtons("oporoh","Widget Category:",
c("Widget A",
"Widget B"),
selected = "Widget A",
inline = TRUE),
conditionalPanel("input.oporoh == 'Widget A'",
numericInput("opppcrange",
label = HTML("Minimum Widget A units per adult per month:"),
min = 0, max = 160, value = 0
),
numericInput("opcrange",
label = "Minimum average monthly Widget A ordering (in dosage units):",
min = 0, max = 10000000, value = 0
),
numericInput("oppcrange",
label = "Minimum average monthly Widget A ordering as a percentage of total ordering:",
min = -1, max = 1, value = -1
)
),
conditionalPanel("input.oporoh == 'Widget B'",
numericInput("ohppcrange",
label = "Minimum Widget B units per adult per month:",
min = 0, max = 160, value = 0
),
numericInput("ohcrange","Minimum average monthly Widget B ordering (in dosage units):",
min = 0, max = 10000000, value = 0
),
numericInput("ohpcrange",
label = "Minimum average monthly Widget B ordering as a percentage of total ordering:",
min = -1, max = 1, value = -1
)
)
),
actionButton("runfilters", label = "Apply filters")
)
)
)
I have tried to implement:
HTML('<button data-toggle="collapse" data-target="#addtools">Additional tools</button>'),
tags$div(id = 'addtools', class="collapse", tags$style = "padding=10px"
but that doesn't seem to be working. Any help would be appreciated.