Topic: Stepper - Problem rendering map component in Step

londoh pro asked 5 years ago


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.


londoh pro answered 5 years ago


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


Magdalena Dembna staff answered 5 years ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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