the problem is that my spinner is covering the whole page at first BUT then, i'am showing new panels (page is getting bigger) and the spinner doesn't adjust.
For example, page's height is approximately 500px and then it goes to 1100px.
And when i'am calling new http request, my spinner still cover only the first 500px. It doesn't adjust.
I'am using a loader component <app-loader><app-loader>:
<ngx-spinner
bdColor="rgba(51,51,51,0.5)"
size="medium"
color="#fff"
type="ball-atom"
fullScreen= "true"
class="myspinner">
</ngx-spinner>
inside my app.component.ts:
<div class="container" #mycontainer>
<!-- loading spinner -->
<app-loader></app-loader>
<div nz-row nzType="flex" nzJustify="center">
<div nz-col nzSpan="23">
<router-outlet></router-outlet>
</div>
</div>
</div>
the css loader.component.scss is:
.myspiner ::ng-deep .black-overlay{
position: fixed !important;
}
Do you guys have any idea ?
i've already check this stackblitz .
BUT here when the loader is triggered, the page is already long with scroll. It worked for me too if i trigger the spinner when the long scrollable page is already here.
Use ngx-spinner#7.2.0 with Angular 6
Related
I am trying to create a div with a fixed left section & scrollable right section and other divs below them. I went through many blog posts and I am not able to figure out, how to create this particular page in react JS using Tailwind CSS.
I am using react JS & Tailwind CSS.
I have added the structure of my page and also added a similar page for reference.
Structure of my page :
<div className="mainDiv">
<div className="rowDiv">
<div className="staticDiv">
<ProductImages
images={productData.mediaUrls}
/>
</div>
<div className="scrollableDiv">
<ProductInfo
productData={productData}
/>
</div>
</div>
<div className="relatedProductsDiv">
<RelatedProducts
sectionHeading="Related products"
/>
</div>
<div className="recentlyViewedProductsDiv">
<RecentlyViewedProducts
sectionHeading="Recently viewed products"
/>
</div>
</div>
Similar page: Click here to view a similar page
div with className staticDiv should scroll only after scrollableDiv
completes its full scroll.
once scrollableDiv finishes its full scroll, both the divs (staticDiv and scrollableDiv) should scroll normally to show relatedProductsDiv and recentlyViewedProductsDiv.
Please click here to view a similar page to get my question in more detail.
I am trying to create a page similar to the one in the link.
hi i am working on code to print the page in my vue web application . so in that i need to print static header in every page , either using css or js.i have created a header div component and made its position as fixed , its getting printed in all page but the content of body is cutted off half.
i need to print a logo , current time stamp in the header section
i adding code structure
<div class="header">
<div class="logo"> </div>
<div class="time stamp"> </div>
</div>
Try to use the table > thead as your template.
If page is overflow to the new one, chrome will repeat the thead section.
I have a parent div that is initially hidden. Inside the div I have an easyui accordion div. When I called the show() method on the parent div, the easyui div displays with a width of 0px. If the div isn't initally hidden, it calculates a width fine.
Does anyone know the proper way to initially hide a div and then when showing it calculate the proper width?
<div id='masterDiv' style='display:none;'>
<div class="easyui-accordion" style='height:475px;' data-options="border:false" >
<div title="Overview" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Checklist" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$('#masterDiv').show();
});
</script>
hey i ran into the exact same problem for the exact same reason as the comment you made. I ended up doing the display:none then manually added each css change that was made. First i made the masterDiv into a class
$('.masterDiv').css("display", "block");
$('.masterDiv' .accordian).css('width', '300px);
accordian being whatever the class easyUI set to a width of 0px. It ended up being a lot of css code but it works until Jquery EasyUI can come up with something.
Why you are hiding the div, if it has to be shown after pageload ?
Did you try
document.getElementById("masterDiv").style.display="block";
I have an html fragment that is being loaded by the backend into the main div of my page. It contains a modal that appears when a link is clicked on. The issue is, is that the modal is able to be covered up by other elements on the page. Setting the z-index is useless, because if an element in the header has a higher z-index than the main div, the modal will show up behind the header, regardless of its z-index. I'm currently solving the problem by using javascript (jQuery) to clone the modal, appending the clone to the body, and then deleting the original modal. This seems like a hacky workaround and could cause potential problems, is there a better way to do this? How do modals usually get loaded so that they don't encounter this issue?
Here's a jsfiddle of the problem: http://jsfiddle.net/kraxF/
Here's the HTML, as you can see, the modal is pretty low in the DOM tree, and may be covered up by elements in the header or footer or main, if they have a higher z-index than "loaded-by-backend".
<div id="container">
<div id="header">
Header
</div>
<div id="main">
Main
<div id="loaded-by-backend">
<div id="modal">
Modal
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
If you can change CSS, just remove position:relative from #main.
http://jsfiddle.net/kraxF/3/
i use dialog box without dialog ui for show erorr event in web page
<div id="downloadcredit" style="width:100%;position:fixed;height:100%;min-height:overflow:hidden;background-color:rgba(127,127,127,0.4);display:none;" >
<div style="text-align:right;width:466px;position:absolute;left:0;right:0;height:337px;min-height:overflow:hidden;background:url(images/creditbase.png);color:black;margin-left:auto;margin-right:auto;top:200px;font:16px behzad;">
<div style="width:100%;height:40px;background:transparent;font:20px behzad;padding-top:8px;color:#818181;text-align:center;"><span style="float:right;font:12px tahoma;font-weight:bold;color:#75797A;margin-right:15px;cursor:pointer;margin-top:6px;" onclick="$('#downloadcredit').slideUp('slow');">X</span></div>
<div style="margin:175px auto 10px;width:95%;font:11px tahoma;text-align:center;color:white;line-height:165%;">
<p> Erorr Sample ...
</div>
</div>
</div>
<body onload="$('#downloadcredit').slideDown('1000');">
but my page is Slow loading and 3 or 4 second after page complete loaded dialog show :( .
any way for show dialog first and page load in background?
I usualy apply the style "display:none" to the target container, then you can use the .load() function and use the callback to show your container filled with data.
Basically :
$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('toto.php',function(){
$('#target').removeClass("loading-layer");
$('#target').show();
});