Just trying to get a basic example of react-tabs working. The styling seems to be missing. The example below is in code sandbox (look in 'Hello.js'), but I see exactly the same behavior after installing the package into my project via npm. What am I missing? Thanks!
https://codesandbox.io/s/jzql1q6819
From the docs at https://github.com/reactjs/react-tabs#styling
react-tabs does not include any style loading by default. Default stylesheets are provided and can be included in your application if desired.
You will have to import the styles yourself. I don't think Code Sandbox will let you import them directly from the NPM package, so you will have to use a CDN or other source.
Besides that, the tabs are working in your example. Clicking a list item reveals different content
Here is a fork of your example with the styles added: https://codesandbox.io/s/ym7l2zk4oj
Related
A colleague is testing a new release of our Vue application and ran into an issue that is not reproducible on my end. I'm trying to figure out if its a problem with the build process itself or something I'm missing about how Vue generates its HTML output - basically if we made some change that is causing this or if its some environment issue on his side.
The problem was initially that the CSS didn't look correct, after doing some inspecting I noticed that it wasn't being applied to certain classes because the generated HTML and minified CSS class IDs do not match.
For example, the minified CSS has...
.message-bubble[data-v-72703b4a]
But the HTML page is being generated on the website renders this...
<div data-v-7822f308" tabindex="0" class="message-bubble">
Any insight as to where to start looking for a root cause would be very helpful. For just a bit more information, the application is Vue 2.6 and we are using the vue/cli-service to do the builds with a vue.config.json to handle the build rules.
I'm using gatsby.js with a styled component to develop my portfolio and when it doesn't render any CSS when I load my site the first time. However, it renders all CSS correctly when I refresh the page. What could be the reason?
This is my portfolio: https://haribhandari.me
The first time you open the link, the CSS will not load, however, if you refresh it will.
When using styled components, Gatsby on production may not render styles correctly. To fix that, follow those instructions:
Install following packages:
npm install gatsby-plugin-styled-components styled-components
babel-plugin-styled-components
Edit the gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-styled-components`,
options: {
// Add any options here
},
},
],
}
More information are described in the documentation
A great way to let other's help you out is to provide some code snippets as it is hard to go through your site's code just in the browser tools.
I am not a gatsby expert and hope someone can help you understand the concept better. I would look into your <head> section.
<link as="script" rel="preload" href="/component---cache-caches-gatsby-plugin-offline-app-shell-js-ad6431e4664bcf916d19.js">
There is a similar topic regarding this issue here Gatsby v2 site does not load CSS properly
I also notice that your menu does not scroll to your projects section, you may want to take a look at that code as well.
Hope this helps
creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.
You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).
Gist of code: https://gist.github.com/FA-ViPer/325251949e6dc70d0278
Issue on package: https://github.com/eahefnawy/meteor-onepage-scroll-0.9/issues/1
I use a template to create my div sections and have one jquery call that executes when it is rendered on a new page. From trouble shooting, it looks like when I go from one page to the next the classes will still update but the webkit-transform fails to be updated in the style.
I've moved to using the fullPage.js package (meteor add lawshe:fullpage). I ran into the same issue, but it can be overcome by running fullpage.destroy in template.destroyed.
I'm having trouble configuring my initial installation of dojo to include the widget framework correctly.
Following most of the code I see, including dijit should look like this:
dojo.require("dijit");
and that's that. Unfortunately, that doesn't seem to work.
Using this initializes the widgets correctly, but there's some weird behavior from the standard dijit methods that makes me think that I'm doing it wrong:
dojo.require("dijit.dijit");
Is there an element of configuring dojo that I'm missing? The files are all placed as they are in the 1.2.3 distribution, underneath another javascript folder.
You don't actually have to include dijit, just point directly to widgets you want to use: dojo.require("dijit.Dialog");. Weird widget behavior could be explained also by:
missing theme css files: check with FireBug that everything gets loaded
missing theme class attribute: add class="tundra" to the body element
missing djConfig="parseOnLoad: true"