3. Issue happen when display loading a modal by GIF file using ons-modal

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Issue happen when display loading a modal by GIF file using ons-modal


  • Hi all,
    Currently, I am using Onsen v1.3 for my Monaca project and I need to display a Loading modal using ons-modal element. Everything is ok except for one issue which display Loading using a GIF file.
    Detail: the Loading using GIF file work fine. But there is one un-expected black small line during loading running. And I cannot found the root cause as well as solution to remove it. Please find detail at attachment.

    0_1477984259735_Screenshot_2016-11-01-13-54-33.jpg

    Below is code:

    <ons-modal var="modal">
    <div class="loading-area">
        <img class="loading-image" src="img/loading.gif">
        <p class="loading-text">Loading...</p>
    </div>
</ons-modal>

    Below is CSS:

    .loading-area{
  background-color: #FFF;
  border-radius: 20px !important;
  margin-left: 5%;
  margin-right: 5%;
  height: 30%;
}
.loading-text{
  color: #000;
  font-size: 15px;
}
.loading-image{
  height: 80px;
  width: 80px;
  padding-top: 20px;
}

    One more thing that is I tested the same code on codeoppen and this issue not happen :( (please find code here )

    Please help me :(

    0

  • Hey, I found the root cause of this issue that is the “page__content” has “overflow: scroll”. If I change that property to “hidden”, the issue is not happened. And I do not the reason :(

    0