Placing leaflet controls side-by-side instead of vertically stacked in R/Shiny with HTML/CSS
What I want to do is pretty simple: I want my leaflet controls to be aligned side-by-side in rows rather than vertically as columns (as leaflet automatically does).
Here is some short example code:
library(shiny)
library(leaflet)
shinyApp(
ui <- fluidPage(
leafletOutput("map", width = "100%"),
tags$head(tags$style(HTML(".leaflet-control-layers-overlays {width: 190px;}")))
),
server <- function(session, input, output){
output$map <- renderLeaflet({
leaflet() %>%
addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>%
addProviderTiles("Esri.WorldImagery", group = "Layer2") %>%
addLayersControl(position = "topleft",
baseGroups = c("Layer1", "Layer2"),
options = layersControlOptions(collapsed = F))
}) # END RENDERLEAFET
} # END SERVER
) # END SHINYAPP
Here's the output:
Both the zoom arrows and the layer box are leaflet layer controls. I want them to be side-by-side. I have altered the width of the layer box with HTML tags for that div class (in Shiny's UI call -- refer to code).
I opened the app in my web browser to inspect the source. Here's what I found:
From what I can tell, both of the leaflet controls are in the class .leaflet-top .leaflet-left (makes sense, they're both in the top-left ;) ), but I can't figure out how to unstack them. Any tips?
javascript html css r leaflet
asked Mar 2 '17 at 20:39
LaurenLauren
436215
add a comment |
What I want to do is pretty simple: I want my leaflet controls to be aligned side-by-side in rows rather than vertically as columns (as leaflet automatically does).
Here is some short example code:
library(shiny)
library(leaflet)
shinyApp(
ui <- fluidPage(
leafletOutput("map", width = "100%"),
tags$head(tags$style(HTML(".leaflet-control-layers-overlays {width: 190px;}")))
),
server <- function(session, input, output){
output$map <- renderLeaflet({
leaflet() %>%
addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>%
addProviderTiles("Esri.WorldImagery", group = "Layer2") %>%
addLayersControl(position = "topleft",
baseGroups = c("Layer1", "Layer2"),
options = layersControlOptions(collapsed = F))
}) # END RENDERLEAFET
} # END SERVER
) # END SHINYAPP
Here's the output:
Both the zoom arrows and the layer box are leaflet layer controls. I want them to be side-by-side. I have altered the width of the layer box with HTML tags for that div class (in Shiny's UI call -- refer to code).
I opened the app in my web browser to inspect the source. Here's what I found:
From what I can tell, both of the leaflet controls are in the class .leaflet-top .leaflet-left (makes sense, they're both in the top-left ;) ), but I can't figure out how to unstack them. Any tips?
javascript html css r leaflet
asked Mar 2 '17 at 20:39
LaurenLauren
436215
add a comment |
What I want to do is pretty simple: I want my leaflet controls to be aligned side-by-side in rows rather than vertically as columns (as leaflet automatically does).
Here is some short example code:
library(shiny)
library(leaflet)
shinyApp(
ui <- fluidPage(
leafletOutput("map", width = "100%"),
tags$head(tags$style(HTML(".leaflet-control-layers-overlays {width: 190px;}")))
),
server <- function(session, input, output){
output$map <- renderLeaflet({
leaflet() %>%
addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>%
addProviderTiles("Esri.WorldImagery", group = "Layer2") %>%
addLayersControl(position = "topleft",
baseGroups = c("Layer1", "Layer2"),
options = layersControlOptions(collapsed = F))
}) # END RENDERLEAFET
} # END SERVER
) # END SHINYAPP
Here's the output:
Both the zoom arrows and the layer box are leaflet layer controls. I want them to be side-by-side. I have altered the width of the layer box with HTML tags for that div class (in Shiny's UI call -- refer to code).
I opened the app in my web browser to inspect the source. Here's what I found:
From what I can tell, both of the leaflet controls are in the class .leaflet-top .leaflet-left (makes sense, they're both in the top-left ;) ), but I can't figure out how to unstack them. Any tips?
javascript html css r leaflet
asked Mar 2 '17 at 20:39
LaurenLauren
436215
What I want to do is pretty simple: I want my leaflet controls to be aligned side-by-side in rows rather than vertically as columns (as leaflet automatically does).
Here is some short example code:
library(shiny)
library(leaflet)
shinyApp(
ui <- fluidPage(
leafletOutput("map", width = "100%"),
tags$head(tags$style(HTML(".leaflet-control-layers-overlays {width: 190px;}")))
),
server <- function(session, input, output){
output$map <- renderLeaflet({
leaflet() %>%
addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>%
addProviderTiles("Esri.WorldImagery", group = "Layer2") %>%
addLayersControl(position = "topleft",
baseGroups = c("Layer1", "Layer2"),
options = layersControlOptions(collapsed = F))
}) # END RENDERLEAFET
} # END SERVER
) # END SHINYAPP
Here's the output:
Both the zoom arrows and the layer box are leaflet layer controls. I want them to be side-by-side. I have altered the width of the layer box with HTML tags for that div class (in Shiny's UI call -- refer to code).
I opened the app in my web browser to inspect the source. Here's what I found:
From what I can tell, both of the leaflet controls are in the class .leaflet-top .leaflet-left (makes sense, they're both in the top-left ;) ), but I can't figure out how to unstack them. Any tips?
javascript html css r leaflet
javascript html css r leaflet
asked Mar 2 '17 at 20:39
LaurenLauren
436215
asked Mar 2 '17 at 20:39
LaurenLauren
436215
asked Mar 2 '17 at 20:39
LaurenLauren
436215
asked Mar 2 '17 at 20:39
LaurenLauren
436215
asked Mar 2 '17 at 20:39
LaurenLauren
436215
436215
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Try adding these this css rule
.leaflet-control-zoom.leaflet-bar.leaflet-control > a {
float: right;
}
Switch between right and left depending on which side you want the plus and minus to be.
answered Mar 2 '17 at 20:49
Eric GuanEric Guan
7,91221730
So this works for getting the + and - arrows side by side, but what I wanted was for the layer control box (with Layer1 and Layer2) to be beside the arrows. Following your example, I tried this:.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control > a{float: right;}, which did not work. Any insight? What does the> arepresent?
– Lauren
Mar 3 '17 at 21:41
add a comment |
I suggest changing the CSS for the elements with the classes you have identified to display: inline-block and float: none.
display: inline-block does not add a line-break after the element, so the element can sit next to other elements. w3School reference for CSS Layout - display
float:none the element does not float (will be displayed just where it occurs in the text). w3School reference for CSS Layout - Float
Try:
.leaflet-top .leaflet-left {
display:inline-block;
float: none;
}
answered Nov 26 '18 at 18:14
JMersJMers
366
1
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
– Nic3500
Nov 26 '18 at 19:49
Thanks for the feedback @Nic3500. Edited.
– JMers
Nov 27 '18 at 1:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42565497%2fplacing-leaflet-controls-side-by-side-instead-of-vertically-stacked-in-r-shiny-w%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try adding these this css rule
.leaflet-control-zoom.leaflet-bar.leaflet-control > a {
float: right;
}
Switch between right and left depending on which side you want the plus and minus to be.
answered Mar 2 '17 at 20:49
Eric GuanEric Guan
7,91221730
So this works for getting the + and - arrows side by side, but what I wanted was for the layer control box (with Layer1 and Layer2) to be beside the arrows. Following your example, I tried this:.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control > a{float: right;}, which did not work. Any insight? What does the> arepresent?
– Lauren
Mar 3 '17 at 21:41
add a comment |
Try adding these this css rule
.leaflet-control-zoom.leaflet-bar.leaflet-control > a {
float: right;
}
Switch between right and left depending on which side you want the plus and minus to be.
answered Mar 2 '17 at 20:49
Eric GuanEric Guan
7,91221730
So this works for getting the + and - arrows side by side, but what I wanted was for the layer control box (with Layer1 and Layer2) to be beside the arrows. Following your example, I tried this:.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control > a{float: right;}, which did not work. Any insight? What does the> arepresent?
– Lauren
Mar 3 '17 at 21:41
add a comment |
Try adding these this css rule
.leaflet-control-zoom.leaflet-bar.leaflet-control > a {
float: right;
}
Switch between right and left depending on which side you want the plus and minus to be.
answered Mar 2 '17 at 20:49
Eric GuanEric Guan
7,91221730
Try adding these this css rule
.leaflet-control-zoom.leaflet-bar.leaflet-control > a {
float: right;
}
Switch between right and left depending on which side you want the plus and minus to be.
answered Mar 2 '17 at 20:49
Eric GuanEric Guan
7,91221730
answered Mar 2 '17 at 20:49
Eric GuanEric Guan
7,91221730
answered Mar 2 '17 at 20:49
Eric GuanEric Guan
7,91221730
answered Mar 2 '17 at 20:49
Eric GuanEric Guan
7,91221730
7,91221730
So this works for getting the + and - arrows side by side, but what I wanted was for the layer control box (with Layer1 and Layer2) to be beside the arrows. Following your example, I tried this:.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control > a{float: right;}, which did not work. Any insight? What does the> arepresent?
– Lauren
Mar 3 '17 at 21:41
add a comment |
So this works for getting the + and - arrows side by side, but what I wanted was for the layer control box (with Layer1 and Layer2) to be beside the arrows. Following your example, I tried this:.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control > a{float: right;}, which did not work. Any insight? What does the> arepresent?
– Lauren
Mar 3 '17 at 21:41
So this works for getting the + and - arrows side by side, but what I wanted was for the layer control box (with Layer1 and Layer2) to be beside the arrows. Following your example, I tried this:
.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control > a{float: right;}, which did not work. Any insight? What does the > a represent?– Lauren
Mar 3 '17 at 21:41
So this works for getting the + and - arrows side by side, but what I wanted was for the layer control box (with Layer1 and Layer2) to be beside the arrows. Following your example, I tried this:
.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control > a{float: right;}, which did not work. Any insight? What does the > a represent?– Lauren
Mar 3 '17 at 21:41
add a comment |
I suggest changing the CSS for the elements with the classes you have identified to display: inline-block and float: none.
display: inline-block does not add a line-break after the element, so the element can sit next to other elements. w3School reference for CSS Layout - display
float:none the element does not float (will be displayed just where it occurs in the text). w3School reference for CSS Layout - Float
Try:
.leaflet-top .leaflet-left {
display:inline-block;
float: none;
}
answered Nov 26 '18 at 18:14
JMersJMers
366
1
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
– Nic3500
Nov 26 '18 at 19:49
Thanks for the feedback @Nic3500. Edited.
– JMers
Nov 27 '18 at 1:52
add a comment |
I suggest changing the CSS for the elements with the classes you have identified to display: inline-block and float: none.
display: inline-block does not add a line-break after the element, so the element can sit next to other elements. w3School reference for CSS Layout - display
float:none the element does not float (will be displayed just where it occurs in the text). w3School reference for CSS Layout - Float
Try:
.leaflet-top .leaflet-left {
display:inline-block;
float: none;
}
answered Nov 26 '18 at 18:14
JMersJMers
366
1
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
– Nic3500
Nov 26 '18 at 19:49
Thanks for the feedback @Nic3500. Edited.
– JMers
Nov 27 '18 at 1:52
add a comment |
I suggest changing the CSS for the elements with the classes you have identified to display: inline-block and float: none.
display: inline-block does not add a line-break after the element, so the element can sit next to other elements. w3School reference for CSS Layout - display
float:none the element does not float (will be displayed just where it occurs in the text). w3School reference for CSS Layout - Float
Try:
.leaflet-top .leaflet-left {
display:inline-block;
float: none;
}
answered Nov 26 '18 at 18:14
JMersJMers
366
I suggest changing the CSS for the elements with the classes you have identified to display: inline-block and float: none.
display: inline-block does not add a line-break after the element, so the element can sit next to other elements. w3School reference for CSS Layout - display
float:none the element does not float (will be displayed just where it occurs in the text). w3School reference for CSS Layout - Float
Try:
.leaflet-top .leaflet-left {
display:inline-block;
float: none;
}
answered Nov 26 '18 at 18:14
JMersJMers
366
edited Nov 27 '18 at 1:37
answered Nov 26 '18 at 18:14
JMersJMers
366
answered Nov 26 '18 at 18:14
JMersJMers
366
answered Nov 26 '18 at 18:14
JMersJMers
366
366
1
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
– Nic3500
Nov 26 '18 at 19:49
Thanks for the feedback @Nic3500. Edited.
– JMers
Nov 27 '18 at 1:52
add a comment |
1
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
– Nic3500
Nov 26 '18 at 19:49
Thanks for the feedback @Nic3500. Edited.
– JMers
Nov 27 '18 at 1:52
1
1
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
– Nic3500
Nov 26 '18 at 19:49
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
– Nic3500
Nov 26 '18 at 19:49
Thanks for the feedback @Nic3500. Edited.
– JMers
Nov 27 '18 at 1:52
Thanks for the feedback @Nic3500. Edited.
– JMers
Nov 27 '18 at 1:52
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42565497%2fplacing-leaflet-controls-side-by-side-instead-of-vertically-stacked-in-r-shiny-w%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
