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.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 :(
-
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 :(