Leaflet map showing blank space while collapsing left panel - javascript

I'm designing a portal of leaflet. I need to change leaflet div width while collapsing left panel. So by default I have put width of div this
.map-wrapper {
width: Calc(100vw - 33vw);
height: 100vh;
}
When I collapse my left panel then I'm adding a class in .map-wrapper
.shrink-map {
width: Calc(100vw - 5vw) !important;
transition: .6s linear;
}
It's perfectly collapsed but map is not loading proper. It's showing blank space in right side. how to solve this. Kindly check image001 and image 002 for better understanding

It looks like you need to refresh the map while or after „flying out“ the panel so it calculates the available space for the map and draws it in full width and height of the container. See the API docs for the invalidatesize method.
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
PS: It would be really helpful to have a „live“ demo of this behaviour.

Related

Chart.js in flex element overflows instead of shrinking

I have tried setting the min-width to 0 on the wrapper div for chart.js, but the chart will grow and then not shrink back down if you drag the window around.
I can't figure it out! The only thing I can do is set width to 99% but then the chart is no longer aligned with my other divs. I've been working on this for days, please help!
Q: How can I get chart.js to be 100% width, and grow/shrink to it's bounding size.
to reproduce, go to the example and if you close the menu, the chart grows, and if you open it, the chart does not shrink back down. it maintains it's size and overflows to the right.
note: my actual project has two separate components for the chart and side bar. So a calc solution doesn't work in this case, I don't want to tightly couple any components to maintain good practice.
Here is my StackBlitz working example
here are pictures to show the reproduction:
chart is the right size, menu open
chart grows when you close the menu (the size is still correct)
open the menu, and the chart overflows right
(Copied from my comment.)
I can't get StackBlitz to run (JS errors due to tracking protection in Firefox) so I can't verify this, but I had that exact issue in my flex layout and solved it by ensuring overflow: hidden was set on the parent (and ancestor) flex elements. A cursory look at your CSS shows this is only done on .page-wrapper.
Update: This solution stopped working with chart.js 3
I had similar problems with a markup like this:
<div style="display: flex; flex-direction: column">
<h2>...</h2>
<div class="chart-container" style="position: relative; flex: 1">
<canvas></canvas>
</div>
<span>...</span>
<span>...</span>
</div>
My outermost div was in a css-grid, maybe that also played a role.
Anyhow, I diagnosed the problem to be this: Even though I applied { responsive: true, maintainAspectRatio: false } to the options of chart.js, the chart had a fixed size, which caused the chart-container not to shrink (even when overflow: hidden was applied, I don't fully understand why). This caused the div element chartjs inserts to detect size changes to never change its height.
So the solution was to simply override the height on the canvas to 100%: canvas {height: 100%!important}.
This allows the canvas container to shrink, causing the size-detection div to shrink, causing a re-render of the canvas, which prevents aspect-ratio issues.
Wrapping the canvas in a div with width 100% and and setting the canvas to max-width 100% works for me:
<div style="width: 100%; position: relative;">
<canvas id="chart" style="max-width: 100%;"></canvas>
</div>
Here your canvas is having width inside absolute parents so its recommended to change the values dynamically using JavaScript (angular in your case). But since you are looking for CSS based solution here is what you can add in your app.components.css file:
.sidebar-wrapper.shrink + div.main-wrapper canvas {
width: calc(100vw - 40px) !important;
}
.sidebar-wrapper:not(.shrink) + div.main-wrapper canvas {
width: calc(100vw - 230px) !important;
}
Here is the working example : https://chartjs-overflow-ex-vlsqmn.stackblitz.io/

Simple jQuery "push" menu - offset main container and menu but transition timings not correct

I am trying to create a simple off-canvas "push" menu. When the menu trigger is clicked, the menu slides in from the right of the viewport and pushes the main content divs offset by the width of the menu.
The jQuery works (in that is pushes the menu onto the page, and pushes the content off the page) but the animations do not work as expected. There is some "catchup" where the menu moves slower than the main content areas.
I set a transition-delay to fix this issue but it doesn't seem to have had the effect I thought it would.
How do I managed to get the content divs to move offscreen so that it looks like they are pushed by the menu?
Here is an example of my issue: http://codepen.io/anon/pen/GrKJor
Here is my code:
$('.nav-trigger').click(function(){
$('nav').addClass('nav--open');
$('header').addClass('content--pushed');
$('main').addClass('content--pushed');
$('footer').addClass('content--pushed');
});
And here is the CSS for the transition:
nav {
...
right: -300px;
transition: right 0.2s ease-in;
}
.nav--open {
right: 0px;
}
.content--pushed {
position: relative;
right: 300px;
}
The issue is you're attempting to animate a property - specifically, right position - in a way that will only work in your markup structure if the element being animated has a position:fixed.
You can see the desired behavior in this forked CodePen:
http://codepen.io/anon/pen/ygBNXG
(I also added a 'nav-close' button so you can see the inverse & test repeatedly)
By applying a fixed position to the header, main & footer, the transition effect can indeed be animated:
header, main, footer {
position: fixed;
/* other CSS */
}
To account for the fixed position, I've then offset the top position of main & footer based on your defined heights:
main {
top:100px
}
footer {
top:200px
}
Finally, and this is only preference, I made the left position of header, main & footer be what changes (from 0 to -300px) as that seems to more accurately reflect what's happening, which is those elements are being moved off the left edge of the viewport by 300px.
Update
If you don't want to use position:fixed on the elements, you need to modify your markup structure to wrap the header, main & footer elements and place the nav element outside of said wrapper. This is working sans fixed position and heights/offsets here:
http://codepen.io/anon/pen/qREvEB
The revised markup is essentially:
<div class="wrapper">
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
<nav>...</nav>
In this scenario, the positions of the header, main & footer can be reset to relative and the content is all scrollable as needed.

InfoWindow for Google Maps should expand width as necessary but have a vertical scrollbar

I am using infowindows on a google map but I would like the width of the infowindow to expand as much as needed but for there to be a vertical scrollbar when the window is at a certain height.
I set the div class around the content of the infowindow to have the following:
.mapInfoWindow {
max-height: 200px;
overflow-y: auto;
}
But this seems to somehow limit the width as well due to the now present vertical scrollbar.
See the fiddle here. I would like, for example, the address to take up as much space as it needs.
How can I fix this?

Javascript? Jquery? Can't change width of Tumblr post

I think this will be easy for you coders out there. I have tweaked a Tumblr theme and am pretty happy with the results except that I can't change the width of photos on a permalink (post) page.
Visit: http://hawkohphoto.tumblr.com/post/113115224219/summer-mornings-on-the-north-shore-of-hawaii and you'll see that the image's container is forcing a width of 426px in the element of the image's container:
<div class="tw_post tw_post_get tw_post_photo ocean masonry-brick" id="tw_post_113115224219" data-post-id="113115224219" style="width: 426px; position: absolute; top: 30px; left: 0px;">
The same is happening with the Notes container to the right of the image:
<div class="tw_post tw_perma_post tw_share_block masonry-brick" style="width: 426px; position: absolute; top: 30px; left: 486px;">
I see one of the classes is "masonry-brick". Is masonry javascript what is "forcing" the width on the element? I tried to override the .tw_post class with custom CSS and !important on width: 100% etc. but that changes the width on the posts of the homepage http://hawkohphoto.tumblr.com/
I want to leave the homepage the way it is: 4 columns (images are 244px wide) and have the permalinks (single post pages) display the image at 100% wide and the other notes container (date, notes, highres, etc.) would appear underneath the full size image at 100% width.
How do I change the way those containers appear? I need to change their width, positon, etc. etc.
Thank you very much for you help!
The layout is using this JS library: http://desandro.github.io/masonry/index.html
Which is what is adding the "masonry-brick" class to the elements.
If you have access to the JavaScript for the layout, I would suggest looking for the part of the JS which is initialising the masonry layout. If you can find this method you can pass in an option to set a different width. This is the kind of thing you're looking for:
$('#container').masonry({
// options...
isAnimated: true,
columnWidth: 240
});
Column width is an option you can pass in to change the width. Change this value and the size of your images will also update. You can view all of the options you can pass into masonry here: http://desandro.github.io/masonry/docs/options.html
I suggest you experiment and play with the options until you get something you're happy with.
Hope this helps!
Add following two lines of jQuery in your single Image page.
$(".tw_post_photo").css({'width':'100%',top:'auto',left:'auto',position:'relative'})
It will make the Image to get 100% width
$(".tw_share_block").css({top:'auto',left:'auto',position:'relative'})
it will make the Notes block to get under the Image

Changing CSS of dynamically created Divs

I am facing this alignment issue with my flow diagram.
I have various stages which I pick from DB and depending upon various criteria I create the div and put it at its absolute position on screen.
PROBLEM: The issue at this point is, I am designing this for smaller screen (width = 1280px) but if user sees the site on larger screen, it comes to left due to the absolute layout. I want the diagram to the center always, so fixing the left property is one solution.
So I needed a logic to fix the css, i.e. "left" property dynamically depending upon the size of the screen.
So far I achieved this, but its not working.
$(document).ready(function() {
var textFromController = [[${divText}]];
$('.container').append(textFromController);
var windowWidth = $(window).width();
if(windowWidth > 1280){
$(".item").css("left", $(".item").css("left") + (windowWidth - 1280)/2);
}
});
I am doing all the calculations on controller side so I cannot actually do anything there. I tried AJAX as well but then there is wastage of 1 call as I have to reload the full page.
Thanks in advance.
If you're looking to center your diagram regardless of screen size then you can add this CSS to the .item instead of jQuery solution.
.item{
position:absolute;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 0%);
}
JS FIDDLE

Categories