Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Spinner does not work in Popup

See original GitHub issue

Framework7 version: 5.0.0-beta.19
Framework7 Vue version: 5.0.0-beta.19
Vue.js version: 2.6.10
Platform and Target: Windows 10 / Chrome Web Browser

Describe the bug

<f7-preloader> does not work in Popups.

To Reproduce

Add to main component:

<f7-popup tablet-fullscreen :opened="false" :animate="false">
      <f7-page>
        <f7-navbar title="Preloader"></f7-navbar>
        <f7-block>
          <f7-preloader :size="50"></f7-preloader>
        </f7-block>
      </f7-page>
    </f7-popup>

Expected behavior

Preloader shown.

Actual Behavior

Preloader not shown

Screenshots

does-not-work-in-popup does-work-in-simple-page

Additional context

Does work in simple page:

  <f7-page>
    <f7-navbar title="Preloader"></f7-navbar>
    <f7-block>
      <f7-preloader :size="50"></f7-preloader>
    </f7-block>
  </f7-page>

Issue Analytics

State:
Created 4 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

nolimits4webcommented, Oct 4, 2019

My son loves Kidoverse by the way 😄

Nice, thanks 👍 😃

I figured out it’s working when there is some content in the element - this will work:

Will be fixed in next update

0reactions

scriptPilotcommented, Oct 3, 2019

@nolimits4web - I figured out it’s working when there is some content in the element - this will work:

<f7-preloader> </f7-preloader>

This not:

<f7-preloader></f7-preloader>

Top Results From Across the Web

Error spinner in popup window when I click - Stack Overflow

If you want to set spinner inside popup window then do the following: //this your inside layout final LayoutInflater layoutInflater = (LayoutInflater) this. ......

Chrome browser spinner not appearing when Modal is on page

We have a web page that contains a table with a search, and a modal popup that users can access to enter advanced...

Spinners - Bootstrap

Bootstrap “spinners” can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't...

Spinner does not disappears by redirecting to the modal page

Hi, I made a simple application with branch to the modal page Now, if I switch on "Show Processing" - property by submitting...

How to Display Spinner on the Screen till the data from the API ...

The task is to display a spinner on the page until the response from the API comes. Here we will be making a...