Topic: Stepper - Problem rendering map component in Step
Expected behavior SIngle Page Component within "inner step" will render correctly
Actual behavior Problem rendering map component in intermediate Step
Resources (screenshots, code snippets etc.)
Hi
I have a Stepper with multiple Steps. This is a complex form so each step is created as a separate component.
There is a map created with Vue2Leaflet on an intermediate step.
Problem: The map doesnt render correctly. Initially its rendered with the map center at 0,0 - as per screenshot. https://ibb.co/5cQ0XvV
There's a Vue2Leaflet github thread with similar problems here: https://github.com/KoRiGaN/Vue2Leaflet/issues/157
None of the solutions on there helps.
And I'm posting here because I dont think its a problem with the map per-se for a couple reasons:
1) With map on an intermediate Step: Resizing the browser causes the map to be rendered correctly.
2) With map on the first Step: It works perfectly on page load.
So I'm assuming the problem is occuring because the map isnt aware of the size until that step is rendered.
afaik the Step isnt aware of when its rendered(?), and there are no events or hooks from mdbStepper or mdbStep to wire the map to(?)
Can anyone suggest a solution please?
regards
l.
Hi
thanks for reply and your example
maybe it is a leaflet issue - but I need to use leaflet and osmaps. Or at least not use google|
pretty sure it isnt a styling issue - my map component works fine on browser resize or if on 1st step.
re seeing code: yea sorry, I did intend to create a fiddle but it seemed too complex.
Anyway, I fixed the issue (I think) by forcing re-render of map component via incrementing key as here: https://michaelnthiessen.com/force-re-render
But to do that means digging to find activeStep - and it would be helpful to have this value available.
So heres a request:
Can mdbStepper emit event on changeActiveStep please.
I extended component like this:
changeActiveStep(i, unordered) {
this.validateStep();
let step = i < 1 ? 1 : i > this.numOfSteps ? this.numOfSteps : i;
if (!this.validation) {
this.activeStep = step;
}
else if (this.allowNext(step, unordered)) {
this.checkForm();
this.activeStep = step;
}
else {
this.checkForm();
}
this.$emit('changeActiveStep', this.activeStep);
},
kind regards
l.
Magdalena Dembna staff commented 5 years ago
Thank you for this suggestion - we will try to include it in the next release. Kind regards, Magdalena
I've created an example with our mdb-google-map and it seems to work fine:
<section class="p-5">
<mdb-col xl="6" lg="7" md="10">
<mdb-card>
<mdb-card-body>
<h2 class="text-center font-weight-bold pt-4 pb-5">
<strong>Steps form example</strong>
</h2>
<mdb-stepper within buttons>
<mdb-step name="Step 1" slot="content" :number="1">
<h3 class="font-weight-bold pl-0 my-4">
<strong>Step 1</strong>
</h3>
<mdb-input label="First Name" />
<mdb-input label="Second Name" />
<mdb-textarea label="Address" />
</mdb-step>
<mdb-step name="Step 2" slot="content" :number="2">
<h3 class="font-weight-bold pl-0 my-4">
<strong>Step 2</strong>
</h3>
<mdb-input label="Company Name" />
<mdb-input label="Company Addresws" />
<mdb-textarea label="Address" />
<mdb-google-map
ref="map"
manualInit
name="reg"
class="col-md-12"
:markerCoordinates="coordinates"
style=" height: 500px"
:zoom="14"
></mdb-google-map>
</mdb-step>
<mdb-step name="Step 3" slot="content" :number="3">
<h3 class="font-weight-bold pl-0 my-4">
<strong>Step 3</strong>
</h3>
</mdb-step>
</mdb-stepper>
</mdb-card-body>
</mdb-card>
</mdb-col>
</section>
In the past, we've had an issue with Leaflet like this one: https://mdbootstrap.com/support/jquery/leaflet-map-using-drupal-8-7-3/ which was caused by styling conflict. It's hard to say more without seeing the code.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.8.0
- Device: all
- Browser: any
- OS: not relevant
- Provided sample code: No
- Provided link: Yes