Trying to centre my leafletOutput but I want the legend to stay left justified

Posit Professional & Hosted Products shinyapps.io
1

Hey everyone,

I've searched around google and stack overflow but haven't found this question asked before.
Basically I want to centre my leafletOutput and have done so with this code:

UI <-fluidPage(
fluidRow(width=12, align="center",
      (leafletOutput("Map2", width=1450, height=700)))
)

Except then it centres my legend which makes it look really weird.
So I want to centre the plot but keep the legend in the bottom right corner (which it is) but with the text left aligned (it is being center aligned).

I've also tried this:

fluidRow(width=12, align="center",
      (leafletOutput("Map2", width=1450, height=700, div(style="text-align: left;")))

However this left aligns the entire image, basically over-riding the align="center" in the fluidRow.

I've also tried running this in the server:

addLegend(div(style="text-align: left;"), pal=pal,values =~MerchCoOrds$merchant_state, opacity=1, title="State of Transaction",
                position="bottomright")

But the text stays center aligned.

This is my current server code is

server <- function(input, output, session) {
output$Map2 <- renderLeaflet({
      leaflet(MerchCoOrds) %>% addTiles() %>%
      addCircleMarkers(data=MerchCoOrds, lng=~MerchLongitude, lat=~MerchLatitude, col = ~pal(MerchCoOrds$merchant_state), 
                       stroke = FALSE, fillOpacity = 1.0, 
                       popup=~paste("<h3 >Merchant ID:</h3>",MerchCoOrds$merchant_id, "<h3>Transaction ID:</h3>", 
                                    MerchCoOrds$transaction_id, sep=" "), 
                       label=labels) %>%
      addLegend(pal=pal,values =~MerchCoOrds$merchant_state, opacity=1, title="State of Transaction",
                position="bottomright") %>%
      addControl(title, position="topright")
    })
}

Any help would really be appreciated as I'm sure there's a work around, I'm very new to shiny and R Studio.

2

Okay, I was able to fix it using this simple code tweak in the UI. I changed the fluidRow to an absolutePanel and removed the align="centre" and added in left = "12%"

absolutePanel(left = "12%", width=12, 
      (leafletOutput("Map2", width=1450, height=700))

There must be a better more sustainable solution I'm sure, so if anyone has a better solution please post it, as this is more of a work around than a solution.

Thanks