Having trouble getting a simple Leaflet.map to display properly within a flexbox. It seems like the issue may be related to using invalidateSize
Here is a basic example where it's not working as expected: jsbin
If you remove the flexbox CSS, it should work fine: jsbin
HTML
<body>
<div id="content">
<div id="mapPane"></div>
</div>
</body>
CSS
body {
display: flex;
flex-flow: column wrap;
}
#content {
flex: 1 1;
order: 2;
}
#mapPane {
height: 100%;
}
The map pane's height is determined by its parent #content, which is set to grow with its Flex property. As a result, #mapPane has the correct height — 100% of 0 is 0.
Add display: flex to #content. It will continue to grow with flex: 1:
#content {
display: flex;
}
Add flex: 1 to #mapPane:
#mapPane {
flex: 1;
}
$(function() {
L.map("mapPane");
});html,
body {
margin: 0px;
height: 100%;
}
body {
display: flex;
flex-flow: column wrap;
}
#content {
flex: 1 1;
order: 2;
display: flex;
}
#mapPane {
flex: 1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet" type="text/css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script><script>L_PREFER_CANVAS = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet-src.js"></script>
<div id="content">
<div id="mapPane"></div>
</div>Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...
I have developed a script that is designed to display the menu in a shaking motion and hide it as you scroll down. It functions properly when scrolling within the body of the webpage, but I am facing issues when attempting to do so with a div that has an o ...
After creating a numericInput and a selectInput field using scripts in both shiny and shinydashboard, I noticed that the corner of the numericInput changes to 90 degrees in shinydashboard. For reference, you can view screenshots of both examples below: ht ...
Is there a way to retain the borders inside the table even when the background images are hidden? I am using JS and jQuery to add the picture when the site is loaded. Below is a snippet of my HTML and CSS: <!DOCTYPE html> <html> <head> ...
Is it possible to achieve this using only HTML5 and CSS3, or is JavaScript/jQuery necessary? ...
As part of my efforts to deepen my understanding of Vuejs, I've taken on the task of building a traditional todo list app. While most of the functionality is working smoothly, I've encountered an issue with how the todo items are being displayed. ...
How can I display the URL link outside the search box instead of opening a new page with the search result? I want to show the full URL (https://www.php.net.) below the search box, not within the search results. I only want to see the URL, not the contents ...
In the ever-evolving world of web development, what is the most effective method for creating a drag and drop builder in 2017? While this question has been posed in the past (as seen here), technology changes rapidly. Is HTML5 still the go-to option, or ha ...
When a user inputs their name, email, subject, text, and telephone number, I want to send an email with that data. The email will be sent to a specific email address, such as [email protected]. This process is crucial for a hotel website, where the em ...
Trying to retrieve width and height of an image from this link. <a id="CloudThumb_id_1" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://www.example.com/598441_l2.jpg'" onclick="return theFunction();" href="http ...
Seeking guidance on how to properly test the component below that utilizes a 3rd party JavaScript library - import * as Leaflet from "leaflet"; export class GeoFencingComponent { map: any; constructor() { this.map = Leaflet ...
Currently, I am delving into frontend development and honing my CSS skills. In my latest project, I have incorporated a mat card which can be viewed in the linked image https://i.sstatic.net/TEDcg.png. Below is an excerpt of my code: <div class=&quo ...
Exploring how to utilize the value "typed_from_user" in another tag within the same form, using only PHP & HTML without relying on JavaScript. Is this scenario feasible? For instance, let's say I wish to reuse the term 'pizza' <form> ...
I am exploring the option to load and evaluate a script from a third-party synchronously. Here is an example that currently works well: <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfe ...
I've been working on overlaying text over an image using Jquery and css. The overlay text is displaying nicely on the image, but I'm struggling to change the font and size of the text. I attempted to make changes in the CSS for the font family an ...
I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle. Check out the code snippet here. While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in ...
How can I efficiently display markers with time validity on a map in my asp.net web API application with angularJS frontend in near real time? Here's the scenario: Every user of the app should be able to see when another user adds a marker on the m ...
I have been attempting to Export a table from a jsp page to Excel using AngularJs. Is Angularjs not compatible with IE? I am also encountering this error SCRIPT5009: 'Node' is undefined In Chrome and Firefox, the Excel file only opens when save ...
Check out this HTML form that I have put together. @import url('https://fonts.googleapis.com/css?family=Roboto'); *{ margin: 0; padding: 0; box-sizing: border-box; outline: none; font-family: 'Roboto', sans-serif; } bod ...
I've been struggling to make a div adjust to its content size here. I've attempted various methods to shrinkwrap it, but none seem to work. <div class="outer"> <div class="cont"> <img src="http://www.placehold.it/100" ...