Summary
I am trying to render some slides and the container the slides exist in does not hide the non-active slides. The result is you can see all slides when only one should be visible. Additionally, The slides render outside of the container.
Attempts
I'd rather not make my own slide component and try to get it to work since that's the point of using this library. I've tried changing different css styles to see if it works, tried changing some of the content, nothing has fixed it yet.
Notes
When I put the component into storybook, the issue goes away. I'm not sure what the difference is, I pass the same props to both.
I found a solution. I changed the file to a scss file in node_modules, created an scss file in the same folder as my component, and imported the node_modules scss file into the new scss file.
The problem is related to react-carousel.es.css. It's either not imported or not applied for some reason. I had the same issue when forgot to import it
Related
i created a webpage but there is a problem. React is rendering css styles that i didn't add to any of the elements in my css file. I decided to use web developer tool to inspect the site, and i noticed react is rendering changes from an old save in the css file. Basically it's not reacting to new changes made in the css file. Instead it is still rendering the old changes.
like look at the .left div, in the code, it doesn't have a margin but when rendered, it has a margin and a background color
but this is what happens when it is rendered.
the solution to this is that all the css files in react are linked. so it is using the styling from another css file.
If you want to limit a css file to ONLY a page, use [page_style_title].module.css instead of [page_style_title].css
Try refreshing the page with Ctrl + F5 to clear the old caché content.
I was making react components and everything was good until I see that my sass classes are shown in my result
when I view the page source every thing is ok and <body> contains my code inside the root element ,but when I inspect elements there are <style> tags with sass classes inside <head> also my console has no errors.
I can solve this issue using style{display:none;} but I want to know the reason why this issue happens.
inspect and my result are in this picture
That happens when you style your application with .css or .sass files, like the initial ones that come with create-react-app (index.css). If you want to style your app and don't want that to show, create .js files and put your css inside, using inline style, for example.
Example:
I'm working on styling my react app with imported scss modules (using node-sass). I would like to create a .scss file for each component. I finished styling my landing page and everything was fine, but when I moved on to my login page the CSS Grid layout was being overridden by the landing page's scss file since I was grabbing the 'root' div in each scss file and creating the grid layout in there. Any help would be appreciated!
Okay, I figured it out after taking a little break. I'm being very specific in my class names for each component just to make sure nothing conflicts and i'm using toggle/remove of unique class names for each component for my root div in the lifecycle methods of each component.
I am using React for a project and I'm trying to set a desired image to be the first image a root component loads, right now the first image being loaded is the logo from navbar component that's also a part of the root page component.
I've looked online for a solution but didn't find any, is there any way to do that in React? something like delaying the rendering of all other images except one.
The reason that I want to achieve this is to share the production webpage in an app, and the app takes the first image loaded as the default cover image for the shared link.
Apps generally use images declared in a meta tag as the preview. You should check which meta tag the other site uses, grabbing the "first" image is likely just a fallback for a missing meta tag
const {complete} = document.getElementById("myImg") // select image. You can use ref here as well.
if (complete) {/*do your stuff, eg setState({displayContent: true})*/}
I'm currently building a 6 page site and have finished the template for the navigation elements, the problem is, I just put the css & js into external files for the elements that will be the same on each page but now they aren't rendering on the original page or the new page, just showing white where there should be images.
Is this because I used id's on the elements instead of classes?
I thought it wouldn't matter if the id's were on separate pages that's why I'm asking here as it could be something else.
After putting the CSS & JS into external files Dreamweaver asked if I would like to update the links, I answered yes and it changed all background images in the external css file from (images/image.jpg) to (file:///images/image.jpg), I had to change them all back to the original path. Problem solved.
It does not matter if id's are on sepereate pages. You probably have a JS error somewhere in your migration. Did you load the page with firebug/chromedevelopertools/iedevelopertools open and see if there is a JS error?
ID are not the problem. check that the relative path is still correct according to the css file. to me that seems to be the most probable mistake.