I am using Nextjs with Material UI and Material UI CSS doesnt load properly on first page load like the picture
wrong look like this on first visit
correct one with correct style after a page transition
(there are alot of other instances for example elements like header with fixed position are not in their place etc ... )
but when I transition from one page to the other or even trigger a setState command everything goes to its place and CSS gets applied. I think this is because of class name mismatch between server and client I have applied the _app and _document from this link and the issue still persists.
so there is only one option for me and that is to add a Twitter or Instagram like first page load into the site so if this is the first visit it gets showed to user then because of call to set some state everything shows properly. So how can I detect in nextjs if this is the first page visit from a user into the site and I dont want to use the context provider cause then I have to add the consumer to every page and the site has alot of pages
is there any workaround or solution for this problem I have been searching for an answer for weeks and I have asked the creators of Material UI and they said that with some upcoming upgrade it will get fixed but untill then what should I do ?
After so many days I noticed that in my _document.js file I have
import { ServerStyleSheets } from "#material-ui/styles";
I changed that to
import { ServerStyleSheets } from "#material-ui/core/styles";
and after that CSS got applied and I got rid of the flickering problems
Related
Trying to get a code generated by Crowdriff to display a gallery on a page and it is being blocked with css that I am not defining as display none. I'm not sure where this is coming from as I haven't set it anywhere to display none.
Screenshot of problem
Here is the page where it should be showing:
https://www.orillialakecountry.ca/test-gallery/
Script tags are never displayed. These are used to import and execute javascript files.
In the javascript a HTML element is probably targeted in which it tries to inject it's HTML.
I am having an issue testing with codeceptjs. I am attempting testing apps on the Atlassian cloud but codeceptjs/puppeteer cannot interact with any of the elements on the page. When I enable screenshots I see it is on the right page but codeceptjs can only find the elements in the navigation menu. it cannot even find the body element either by selector or xpath.
I tried adding I.waitForNavigation() but the tests never advance past that step. I tried to set a timeout in the config section as they say in the docs here but I am having no luck. I tried everything they suggested but it just waits there forever. if I comment out I.waitForNavigation() it will fail because it cannot find a Boyd element. I am using the default config file that gets created when you install codeceptjs in a directory. this the code I am trying to test but it is causing all kinds of issues.
I.amOnPage('https://artemis-test2.atlassian.net/wiki/plugins/servlet/ac/com.nurago.confluence.plugins.treecopy/copy-page-tree-confluence?page.id=25821196&space.key=TEST1');
I.waitForNavigation();
// if I don't comment this out it will wait here forever
I.wait(4);
I.waitForElement('.ap-iframe');
// it can find the iframe for some reason but nothing else
I.waitForElement('.body');
// if I do comment it out it fails here because it says there is no body element. can't find it by xpath either.
I have no idea why this is happening. any help is greatly appreciated.
amOnPage with default config runs navigation and passes after navigation.
waitForNavigation will start to wait navigation after navigation. So it never happens, if you will not run navigation again or page redirect starts.
You have 2 choices:
not to use waitForNavigation and use amOnPage only.
use waitForNavigation and amOnPage within Promise.all: await Promise.all(I.waitForNavigation(); I.amOnPage(pageUrl));
The problem is about how to maintain the content and state of an iframe in a component of Vue no matter the component is showing or hiding.
I tried two methods:
(1) using keep-alive together with vue-router
<keep-alive>
<router-view>
<Component></Component>
</router-view>
</keep-alive>
(2) take it as a sub component, using v-if to show and hide instead of vue-router
<Component v-if="$store.state.isShow"></Component>
both methods keeps the content of component but the iframe still refreshes every time, so is there any method to achieve just hiding and showing the iframe?
A similar question is Thomas question, he also uses the vue-router method and does not work out, I agree with the opnion of Thomas that Vue just keeps the content of component but not of iframe.
Thanks a lot!
If the sub component approach works for you:
<Component v-if="$store.state.isShow"></Component>
then a slight modification will keep the iframe from being refreshed on state changes:
<Component v-show="$store.state.isShow"></Component>
Note that this only works if the route remains unchanged.
If you actually need to use different routes, and if the only problem with refreshing the iframe is performance, you might be able to get away with loading the iframe contents via ajax and caching it in local storage.
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
I work as an intern on a website wich is actually protected with pass so I can't give you the link...
Anyway, I will ask the question and if you need some code I can give it.
So, there is a responsive design for the mobile made buy an external party which created the design/css. The responsive work correctly when I work with wampServer, and I resized the page with the ctrl+maj+m on firefox.
The actual problem is, when I put the same page on the server, the responsive don't work anymore... on firefox and on mobile phones.
I don't get how is that possible, so maybe someone encountered the same problem and has some tips?
Thank you
EDIT : There is ONE page which still works online, but I really don't get why, it has exactly the same code as the others... the 'responsive code' is included in each page at the top with the footer too (but this one is at the end of the page). Just the body changes on every page.
EDIT EDIT :
Here is the sample code. header.php, head.php, mainmenu.php.
EDIT OF THE MASTER EDIT :
Thanks Abdul-Rafay Shaikh.
Well, all of the css is imported in the import <link rel="stylesheet" href="assets/css/zz-all.css" type="text/css" />. Which is called in the head.php. The path is good, in fact it works in one page and not the others. I think I have to check, line by line, all of the code to find maybe an import that f***ed all up, or something like that.
Thanks for all your help anyway :)
Well I think the responsive template you are using maybe used javascript to actually make breakpoints and as you told us that the one page that is working when deployed on a real server has the responsive css in the footer. So my solution would be put the css of all the pages in the footer or check wether any js is actually making the breakpoint and put the CSS after that javascript.
The Second thing is the path's maybe your CSS that has the responsive code has their path defined preceding localhost/ or some thing like that check that.
Third if there is no javascript that is making your website responsive and its only css import your responsive CSS to the main stylesheet
In your main style sheet
#import url("responsive.css");
just to make sure that your responsive style sheet is loaded whenever your main style sheet is loaded.
I hope this solves the problem