I have the following view
app/views/people/index.html.erb
and layout app /views/layout/application.html.erb
Content of application.html.erb
<link href="/assets/all.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/defaults.js" type="text/javascript"></script>
but when I go to localserver:3000/people
The styles of the public / stylesheets folder are not applied
The source code localserver:3000/people
<link href="/assets/all.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/defaults.js" type="text/javascript"></script>
Adding this line to your index.html.erb should do the trick
<%= stylesheet_link_tag "all" %>
For more details,see this API
Related
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.
I feel a little obscure in understanding the Guide to install spree_bootstrap_theme (https://github.com/Andrewmp1/spree_bootstrap_theme) . Do you have any suggesions for me? Thanks a lot!
Below is what I have done:
Create a new sandbox for spree.
Add to Gemfile:
gem 'spree_bootstrap_theme', :git => 'git://github.com/Andrewmp1/spree_bootstrap_theme.git'
Rename application.css inside stylesheets to application.css.scss
Create a new file: bootstrap_and_overrides.css.scss inside stylesheets folder.
Add to bootstrap_and_overrides.css.scss this below line:
#import 'store/spree_bootstrap_theme';
Open application.js, add:
//= require bootstrap
Run rails server
Result I received: http://imageshack.us/f/405/spreet.png/
As you can see, the layout was broken.
I view source the file and do not see anything about bootstrap. What I got is here:
<meta content="Spree demo site" name="description" />
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/assets/normalize.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/skeleton.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/screen.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/spree_core.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/spree_promo.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/all.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="BoSR3FtvQBjqF68s7amtXGMVypmaW68e7tHhRzYvqzw=" name="csrf-token" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.validate/jquery.validate.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/store/checkout.js?body=1" type="text/javascript"></script>
<script src="/assets/store/product.js?body=1" type="text/javascript"></script>
<script src="/assets/store/cart.js?body=1" type="text/javascript"></script>
<script src="/assets/store/spree_core.js?body=1" type="text/javascript"></script>
<script src="/assets/store/spree_promo.js?body=1" type="text/javascript"></script>
<script src="/assets/store/all.js?body=1" type="text/javascript"></script>
I TRIED TO ADD gem 'bootstrap-sass' to the Gemfile too but the result in both case is THE SAME as above.
I've just created a file, inside stylesheets/store, named "spree_bootstrap.scss" with the content:
#import 'store/spree_bootstrap_theme'
After that, i removed the code below from stylesheets/store/all.css
*= require store/spree_core
*= require store/spree_promo
And the same for javascripts/store/all.js:
//= require store/spree_core
//= require store/spree_promo
And i included the following, in javascripts/store/all.js::
//= require bootstrap
Start your server and you'll see the correct style of spree_bootstrap_theme.
I think you should not rename application.css to application.css.scss . The file application.css is a special purpose file . Here you can read about its format and syntax .