I have a problem with the navigation bar,
I have a navigation bar for my project. As you can see my code below if I use the link and get it from an external source it is working well. But there is a problem for me when the net is a bit slow I can see the navigation's loading on my screen. it is a very small duration but it disturbs me very much. So I decided to use CSS source from my project folder but could not do that. I tried many code samples but could not do it correctly. If somebody helps me, I will appreciate it. Thanks.
I am also still trying to solve it but I wanted to get some help.
function MyNavBar(params) {
//console.log(params["conpanyID"]);
return (
<div>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
</head>
1-When I use link/external source
[1]: https://i.stack.imgur.com/SO5qB.png
2-When I use CSS file from my project folder.
[2]: https://i.stack.imgur.com/MqHqo.png
you might have linked your stylesheet inside the body instead of the header section , because of which your page will load first, then your CSS
here is an example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" href="css/s.css">
<link rel="icon" href="css/si.ico">
</head>
Related
Simple html file with attached css file. Code completion does not work. (inline css does)
I've spent lots of hours trying to figure it out. Hope this will save some time for those who are still struggling. See the answer below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Autocompletion will not work if Code Insight feature is disabled.
So my problem was with the big css file. Actually, it's a regular size file (tailwind css processed by postcss with autoprefixer plugin).
Css file was around 3MB, but code insight stops working for files that bigger than 2.5MB by default.
The solution is to increase filesize limit.
Go to Help > Edit Custom Properties
Paste config
# Maximum file size (kilobytes) IDE should provide code assistance for.
idea.max.intellisense.filesize=10000
Save and restart
I'm running a node.js project on localhost that I created with IntelliJ idea, and overall, it seems to work fine on Chrome from a usability standpoint. However, the CSS files don't resolve so I'm not getting any styles. Using the developer tools on Chrome, I can see that it can't find them. But it sure seems like they are there to me.
However, the main problem that I see is that headers are being added to the handlebars files which contain one of the broken shortcuts. Anyone know where in IntelliJ this is coming from? I tried adding the header info but it just is creating duplicate information.
The first set of info is the one that isn't coming directly from the file I created. I'm just not sure where it's coming from.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='style.css' />
</head>
</html>
I eventually figured it out - the problem is in the Express code setup that I had. The express setup defined a "static" file location for the public directory, so the trick to is to start the path with "/Static", like this
<link rel='stylesheet' href='Static/stylesheets/style.css' />
Then it finds it and I'm good to go!
I have a simple html page using font awesome css. Can anyone see why my font awesome check mark is not displaying, I cannot get the check mark to display and I cannot seem to figure out why.
I am using the .min.css link in my <Head> as such:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LoopLAB Theme</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
When I want to inject it into a <i> element in the DOM, I simply use this:
<i class="fa fa-check"></i>
As you can see above, the check mark does not display. Do you see anything obvious that I am doing wrong? This seems like a beginner's error but I can't find the problem.
Check your CSS. There are a few ways you can do that!
Simply check if font-awesome.min.css is indeed under your CSS folder. If it is, check your folder structure. Can your HTML access this folder using css/font-awesome.min.css? The CSS folder must be a child from the folder you are currently storing your HTML file. Finally, are you using the latest version of font-awesome-min.css? This specific icon might not be included in your CSS file if it's an older version.
Inspect your site using your favorite browser inspect tool and locate your CSS file on inside the inspector. Clicking on it should open your CSS code. The code should be minified. If there is nothing inside of it or some kind of error your website is failing to find your file on your server or computer.
Plus you can also add from a CDN, for example, https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css and import directly to your code.
I'm out of solutions here. Have been trying to solve this for half a day now!!! My jsp can not read my CSS file. I've tried the very simplest file structure here. I put both jsp and CSS under "Web Pages".
So
MyProject
-Web Pages
-WEB-INF
-login.jsp
-logincss.css
-etc...
jsp code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="logincss.css">
<title>JSP Page</title>
</head>
<body>
<p>why you CSS wont WORK!!!</p>
</body>
</html>
css code:
body
{
background-color: red;
}
So I write href="logincss.css" because both jsp and the css are on the same level. But still this does not work! I have the simplest html and simplest css but it does not work! I think the problem is on the Project itself. I just created a new web project, create jsp and css, try it out and it worked!
Please help me I don't know how to solve this problem. Thanks.
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export