I have a custom page 404 jsp page that works fine but does not pick up the css (and image).
My directory structure:
-webapp
- -error
- - -jsp
- - - -page404.jsp
- - -styles
- - - -style.css
I have tried the following but still got no result(don't want to do embedded css because it is not only the css that I need to reference in my JSP)
<link rel="stylesheet" type="text/css" href="../styles/style.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="./style.css">
and a few more...
Any advice?
Related
According to documentation these are the files that need to be added
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
// Load the Kendo Default Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
// Load the Kendo Bootstrap Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
The Error is
Cannot read properties of undefined (reading 'support') at Module. (kendo-vue-charts.js:1:28556)
The order of the script tags is wrong - we need to put the drawing script tag first, then the intl and last but not least the charts script.
I am using Kendo ASP.NET Core MVC controls.
I am using my form controls using Kendo() helpers like
- Html.Kendo().TextBoxFor(x=>x.Title)
- Html.Kendo().DropDownListFor(x=>x.TypeId)
- Html.Kendo().EditorFor(x=>x.Description)
all controls works fine except Kendo().TextBoxFor, it throws the following error on console
Uncaught TypeError: jQuery(...).kendoTextBox is not a function
Here is how my scripts and JS refereed in Head tag page
<link href="~/css/style.css" rel="stylesheet" integrity="" asp-append-version="true" />
<link href="~/css/colors/green.css" rel="stylesheet" integrity="" asp-append-version="true" />
<link href="~/lib/flickity/flickity.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common.min.css" integrity="" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.metro.min.css" integrity="" />
<link href="~/lib/kendo-ui/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" />
<script src="~/js/jquery-3.3.1.min.js" integrity=""></script>
<script src="~/js/jquery-migrate-3.0.0.min.js" integrity=""></script>
<script src="~/lib/kendo-ui/js/jszip.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js" integrity=""></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js" integrity=""></script>
Cant find any related issues online much.
Here is the full console error:
Solution:
Probably something wrong with my local Kendo JS libraries. Updated the scripts and CSS as below and all worked fine.
<link href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" />
<script src="~/js/jquery-3.3.1.min.js" integrity=""></script>
<script src="~/js/jquery-migrate-3.0.0.min.js" integrity=""></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.aspnetmvc.min.js"></script>
Where do I place links like these:
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">"
It gives me error if I just place them in the beginning or end of a .vue file, and it would be redundant, cause I need them available for all the project
.vue single file component format doesn't allow for arbitrary tags. If there's a need for <link> and its type is suitable for <body>, it can be placed into <template> block. Stylesheets can be provided as <style> blocks and don't need <link>. <link rel="icon"> isn't body-ok and needs to be placed in <head>, so it's not suitable for a component that was placed in <body>.
If your using the Vue-CLI place external links and scripts on the <head> Tag in the index.html file. You can find this under the public folder.
Otherwise if you want to import an external file to a component you can do it like:
<style src="/.styleone.css"></style>
<style src="./styletwo.css"></style>
<style src="./stylethree.css"></style>
WAMP server loading index.html just fine but not loading any additional css style sheets and script files.
I've tried these
<link rel="stylesheet" href="wamp/www/AngularJS_Practice/css/style.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<link rel="stylesheet" href="css/style.css"/>
edit
My current index.html page is
<!DOCTYPE HTML>
<html lang='en'>
<head>
<title>Electronic Components</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2>Lorem Ipsum</h2>
</body>
</html>
edit 2
css
h2 {
color: orange;
font-style: italic;
}
Refresh your browser cache. Press 'Ctrl+F5'
That'll do the trick.
This worked for me:
<link rel="stylesheet" href=".\style.css">
You forgot to use type
<link rel="stylesheet" type="text/css" href="css/style.css">
Also note
<link ....> // this is right
<link ..../> // avoid this
Your HTML file seems right , try making this small css file in css folder and link to it
body{background-color:blue;}
Test this
I had a same issue and what worked for me is this
<link rel="stylesheet" type="text/css" href="./css/style.css">
Enjoy
select the full url from url bar and then press ENTER... It works! ;)
Trying to get this widget to render in a basic way.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<link rel="stylesheet" href="/eca/resources/dojox/calendar/themes/tundra/MatrixView.css">
<link rel="stylesheet" href="/eca/resources/dojox/grid/resources/tundraGrid.css">
<link rel="stylesheet" href="/eca/resources/dojox/calendar/themes/tundra/Calendar.css">
<link rel="stylesheet" href="/eca/resources/styles/app.css">
<link rel="stylesheet" href="/eca/resources/dojo/resources/dojo.css">
<link rel="stylesheet" href="/eca/resources/dijit/themes/dijit.css">
<link rel="stylesheet" href="/eca/resources/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="/eca/resources/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" media="screen" href="/eca/resources/styles/standard.css">
<link rel="SHORTCUT ICON" href="/eca/resources/images/favicon.ico">
<script type="text/javascript">
<script src="/eca/resources/dojo/dojo.js" type="text/javascript">
<script src="/eca/resources/spring/Spring.js" type="text/javascript">
<script src="/eca/resources/spring/Spring-Dojo.js" type="text/javascript">
<script language="JavaScript" type="text/javascript">
....
matrixView = new MatrixView({
style: "position:relative;width:900px;height:600px;"
}, "courseInstanceCalendar");
....
I have excluded dojo code before and after for simplicity.
What I'm getting now is only rows with week number and columns with day name like the screenshot but no grid with date values like this example.
Any idea what's missing?
Removing this style fixed the problem:
<link rel="stylesheet" type="text/css" media="screen" href="/eca/resources/styles/standard.css">
So now I have a calendar that looks like the example.
The lesson learned I guess is when you have rendering problems like this always check clashing styles.