I'm trying to use Steroids with AngularJS for an application. Below is the stuff in my head tag.
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/components/angular/angular.min.js"></script>
<script src="/components/angular-touch/angular-touch.min.js"></script>
<script src="/components/lodash/dist/lodash.min.js"></script>
<script src="/components/restangular/dist/restangular.min.js"></script>
<script src="/models/<%= yield.controller %>.js"></script>
<script src="/controllers/<%= yield.controller %>.js"></script>
Now, I can tell the scripts are working, because the Angular stuff is. But the CSS won't load at all. It's in the /dist folder under the correct location, but it just won't load. Copy and pasting into a <style> works.
Any idea how I can fix this?
Thanks!
Try removing the DOCTYPE tag on your layout html file. It is a known issue, hope they fix this problem soon.
Related
I am quite new with Heroku and just deployed my sails.js on Heroku. After deployment I can open the website but I found that some of css attribution can not be presented after I deployed it on Heroku. But it is so confused that if I start it on my localhost, it works well. For example, in my custome.js, I assign a picture
.carousel-inner {
background: url('/images/banner.jpg');
these are my css files in layout.ejs
<link="stylesheet" href="/styles/bootstrap-glyphicons.css">
<link="stylesheet" href="/styles/bootstrap.css">
<link rel="stylesheet" href="/styles/custom.css">
<link rel="stylesheet" href="/styles/dataTables.bootstrap.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/jquery.dataTables.css">
<link rel="stylesheet" href="/styles/jquery.dataTables_themeroller.css">
<link rel="stylesheet" href="/styles/select2.min.css">
these are my javascript files in layout.ejs
<!-- PRELOAD SCRIPTS -->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/jquery-1.11.0.min.js"></script>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/app.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/dataTables.bootstrap.js"></script>
<script src="/js/ejs/ejs_production.js"></script>
<script src="/js/ejs/view.js"></script>
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery.dataTables.js"></script>
<script src="/js/sails.io.js"></script>
<script src="/js/select2.min.js"></script>
<script src="/js/socket.io.js"></script>
<!--SCRIPTS END-->
to my carousel-inner class, but I can not found this picture after I deployed it on Heroku. And also I used dataTable.js, but it can not work on Heroku and works well on my localhost. There are other attributes that can not been presented after I deployed it on Heroku. Is there something wrong? I would really appreciate your help if you can help me!
It's probably too late, but in case somebody else needs the solution, this is what worked for me:
Make sure your .sailsrc file has the following:
{
"hooks": {
"grunt": false
},
"paths": {
"public": "assets"
}
}
With this in place, I could see custom stylesheets both when sails app is running locally, and when it's deployed to Heroku
Check whether your css code is error free using a css validator like CSSLint. In production css is minified and uglified so erroneous code may run fine on localhost but in minified form it behaves unexpectedly.
I got a UI issue on bootstrap with sharepoint-2013. I had given all CSS and JS file path are correctly, but if i change CDN link from fire bug its working properly(only working in firebug), actually i am confusing why its not working directly from sharepoint. can you please help me anyone?
I have given file path
<link href="../../_layouts/15/Site/css/bootstrap.min.css" rel="stylesheet">
<script src="../../_layouts/15/Site/js/jquery.min.js" type="text/javascript"></script>
<script src="../../_layouts/15/Site/js/bootstrap.min.js" type="text/javascript"></script>
CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
CDN working only when I change it from firebug. It is also not working from sharepoint after compiling.
Access the layout directly
Change path to
<link href="/_layouts/15/Site/css/bootstrap.min.css" rel="stylesheet">
<script src="/_layouts/15/Site/js/jquery.min.js" type="text/javascript"></script>
<script src="/_layouts/15/Site/js/bootstrap.min.js" type="text/javascript"></script>
Also will be better if you can use ~SiteCollection and ~Site using Sharepoint:scriptLink
<SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/_layouts/...js" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration1" Name="<% $SPUrl:~SiteCollection/_layouts/....css" %>" runat="server" After="corev15.css" />
I am using the resources plugin (1.2.8) to load my css and js files. it work great but the thing is that the URLs are "relative".
Example:
<r:require module="core"/>
I get something like this
<script src="/app/static/js/core.js" type="text/javascript"></script>
<link href="/app/static/css/core.css" type="text/css" rel="stylesheet" media="screen, projection">
But i want the URL to be ABSOLUTE. Something like this:
<script src="http://myServer.com/app/static/js/core.js" type="text/javascript"></script>
The behaviour i am looking is the same as the "absolute" option when using grails resources
<g:resource dir="css" file="main.css" absolute="true" />
Thanks in advance!
I'm very new to web design...okay, now that that's out of the way, where do I declare variables in the LESS/CSS framework?
I'm using NetBeans IDE 7.0.1
I'm also using Bootstrap 2.0 (not sure if this matters).
I downloaded the latest version of LESS from lesscss.org but it only downloads the minified version.
Here are my links and script tags in the header:
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/realcardio.css" media="all">
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
<script type="text/javascript" src="bootstrap/js/less-1.2.1.min.js"></script>
Can't wait to start assigning values to variables but I'm just not sure what file to do this in?
Thanks all!
You do it in your less file!
sample.less
#font_color: #666;
#font_size: 15px;
body {
color: #font_color;
font_size: #font_size;
}
Then you include this .less file:
<link rel="stylesheet/less" type="text/css" href="sample.less">
<script src="less.js" type="text/javascript"></script>
Before you include the less.js file.
FYI, I find it's actually a much better model to hook up something so that every time you save your .less file in your editor, it compiles it using the node lessc compiler into a .css file and you just include that .css file in your page.
This way I don't have to run a convert before we do a deploy at work.
i am new to anything JQuery and only know basic HTML codes.
So I was wondering what why
<div data-inline="true">
Cancel
Save
</div>
did not work in my html file, even though I blatantly copied off the Jquery Documentation. The buttons did not appear side by side. Whereas when I tried
Cancel
Save
and the buttons appeared side by side.
Does it have to do with my importing the script?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script
I'm not sure, but it is probale that:
the surrounding div causes that the anchors cannot be found by jQuery (or have different style)
you miss data-inline="true" in the upper lines
Cheers
i think you're referring to the documents from here.
my guess is that you didn't include the css file. jqm-docs.css
<head><base href="http://jquerymobile.com/test/docs/buttons/buttons-inline.html">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>jQuery Mobile Docs - Buttons</title>
<link href="../../themes/default/" rel="stylesheet">
<link href="../_assets/css/jqm-docs.css" rel="stylesheet">
<script src="../../js/jquery.js"></script>
<script src="../../js/"></script>
<script src="../docs/docs.js"></script>
</head>