Is it possible to create a loading splash screen that is animating while the rest of the react project is getting rendered?
I'm guessing this would be done through server-side rendering but I am clueless as to how.
It is possible
Add like this.
Edit these index.html in your public folder
Add this in head. This css will make the loader center align
<style>
.img-loader-init img { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
</style>
and in the body
<div id="root">
<div class="img-loader-init">
<img src="loader.gif" alt="loader">
</div>
</div>
loader.gif should be under public folder.
Related
Sorry if this question has already been asked, but is there a way to have two images side by side (or even a grid of images) in a page generated by Gatsby from a file Markdown ? I start the creation of my first site under Gatsby and for the moment, I only manage to display one image at a time, over the entire width (when i try to duplicate on side by side, They put themselves on top of each other.
Is there something to do on the css? Or the configuration takes place in gatsby-config.js ?
If anyone has a solution :)
Thanks a lot !!
Here's the two images in my .md file
 
Here's the part about markdown my gatsby-config.js
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
'gatsby-remark-relative-images',
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 750,
linkImagesToOriginal: false
}
}
]
}
}
Not a clean solution, in Gatsby you can wrap your images with div containers.
code (in markdown)
<div style = "display: flex; justify-content: center;">
<div style = "width: 250px;
margin: 0 1rem;
margin-bottom : 1.5rem;">
<img style = "display: inline-block" src = "./6.jpeg">
</div>
<div style = "width: 250px;
margin: 0 1rem;
margin-bottom : 1.5rem;">
<img style = "display: inline-block" src = "./7.jpeg">
</div>
</div>
result will be :
I hope this helps you :)
I am working on a React Demo Project. I have a parent page and a child page.
I need to disable scroll on the parent page when the child page is opened. This is my Demo Fiddle
This is my Code
<div className="overlay">
<div className="overlay-opacity" onClick={this.hideChild} />
<Child data={data} applyFilter={this.applyFilter} />
</div>
When the popup is opened, add a class to the parent that will disable the scrolling via CSS with overflow: hidden
When closing the popup, remove that class. You can store a variable in the state of the parent that will track if the popup is opened or not, and add / remove the class depending on that variable.
you're already adding a class to the parent when a child is opened.
you can prevent scrolling using css, e.g.
.parent-overlay {
position: absolute;
max-height: 100%;
max-width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
this should do the trick, see here: https://codesandbox.io/s/mjz1jk79q8
However, there might be a less view manipulative variant in order to achieve this too.
I started React based application and i have a ant-design a basic layout with top navbar, sidebar, footer and content area, my code is as following.
<Layout>
<Header>
<TopNavBar/>
</Header>
<Layout>
<Sider className='sider'>
<div >
side nav
</div>
</Sider>
<Content>main content</Content>
</Layout>
<Footer>Footer</Footer>
</Layout>
I want to get a result similar to the representation below, with a sidebar who fill whole available page height
I tried to add the following cCSS class to my sider
.sider {
min-height: 100vh;
position: relative;
z-index: 10;
}
without getting what I want, my sidebar is bigger than available space it's scrolling,the height that exceeds is the height of my header and footer.
I also tried with flexbox but without success, there is any clean way to get the desired result? I thought to do this using the javascript to calculate the available height and set the CSS class.
you can try this code
.menu-style {
overflow: auto;
height: 100vh;
width: 200px;
position: fixed;
left: 0;
background-color: #393f4a;
z-index: 3 ;
border-right : 0;
}
I'm creating a application with angular.js 1.5 components. I'm facing a problem with the footer it's going up side rather than staying down how can I fix this?
Here is the plunker code.
[https://plnkr.co/edit/ax1EO771NJg1rfgI840S?p=preview][1]
The problem is that you are using virtual height value so the .wrapper element takes the height of your window and doesn't push the footer below.
.wrapper {
position: relative;
top: 0;
// height: 100vh
}
I am trying to add a banner above my fixed-top navbar. I have looked around and understand some basic concepts on how to do this but my example is a little more complex and I am getting a little lost.
User can add a custom banner to the top of my page. If this happens I need to push everything (including the fixed navbar) down the height of the banner (say 20 px).
I have created a class that I can apply to the nav element:
.top-banner-nav {
top: 20px;
}
Navbar:
<nav class="navbar navbar-default navbar-fixed-top" ng-class="{'top-banner-nav': banner == true}">
That works great to push the static navbar down 20px if there is a banner. However I have to problems.
When you have a static navbar like this you have to add a top padding to the body to push the body content below the banner. Now all of the sudden I would need to push the body content down 70px. Not sure if there is a good way to make this happen dynamically.
I have another static navbar directly underneath the very top navbar. When I move the very top navbar down 20px I need to move this other navbar down 20px as well. Unfortunately this lower nav is fixed as well with top: 50px to place it right below the upper navbar.
I have a plunker here that demonstrates the problem. And I am not really sure where to go from here. Might have to mess with things in javascript, but I would like to try and avoid that is at all possible to avoid things jumping around on page load.
http://plnkr.co/edit/DYYMz1?p=preview
I looked at your plunker. I made some changes to your CSS and HTML to accomplish what you are looking for. The change I made to the HTML was the body tag. The new tag looks like this:
<body ng-controller="MainController" ng-class="{'bodyModified': banner == true}">
The new CSS file looks like this:
body {
padding-top: 50px; Need this to move down body under fixed header
}
.bodyModified {
padding-top: 20px;
}
.settings-nav {
position: relative;
right: 0;
left: 0;
background-color: #E2E2E2;
z-index: 1029;
top:0px;
}
.settings-content {
padding-top: 70px;
}
.top-banner-nav {
position: relative;
margin: 0;
height: 20px;
}
.top-banner {
position: fixed;
right: 0;
left: 0;
top:0;
margin-bottom: 0px;
background-color: #FFFF00;
}
You can also use javascript and jQuery to accomplish this as well. Hope that helps. Let me know how it goes.
Here is a plunker demonstrating the changes
http://plnkr.co/edit/39LhQA2gdMremnTOGXe4?p=preview
you can try jquery solution for this.for example if you are using top-nav-fixed-banner class you can code something like this.
function fixBannerHeight(){
var bannerHeight = $(".top-banner-div").height();
$(".top-nav-fixed-banner").each(function(e){
var height = $(this).height();
bannerHeight = bannerHeight + height;
})
$('.top-banner-div').css({"height":bannerHeight+"px"});
}
call fixBannerHeight() when you are adding dynamically banner.
Hope this helps.