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" />
Related
I have set up materialize css in my project, however the local copy does not appear to work with checkboxes or radio buttons. I am not sure why this would be the case. When I use the CDN version everything works as expected.
Here is a slightly messy .master file.
<%-- Font Awesome --%>
<link href="~/includes/css/all.css" rel="stylesheet" />
<%-- Includes the Materialize CSS --%>
<%--<link href="~/includes/css/materialize.css" rel="stylesheet" />--%>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<%-- Jquery because I need it still, hope to remove this in the future --%>
<%-- <script type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src=<%= ResolveUrl("~/includes/js/materialize.js") %>></script>--%>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I don't really want to call a third party CDN forever in this case.I feel I am missing something simple here and that I am being an idiot.
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 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.
I'm sure there is something ridiculously simple here that I am missing but I just cant see it. I have a number of template pages which are currently in the root folder of my project, as are 2 of my CSS sheets. I have more contained in a "CSS" folder. I want to take the the template pages (call them home.aspx and dashboard.aspx) and put them in a folder called "Template_Design_Pages". I am happy to keep the CSS pages in the root directory, or move them. When I move my template pages to the folder the CSS is lost. I have tried updating the href's on the pages I have moved to no effect. Say the href is href="css/Reset.css" - i have tried changing to:
href="/css/Reset.css"
href="~/css/Reset.css"
href="Orion_Admin/css/Reset.css" NB Orion_Admin is root.
I have seen this mentioned
href="<%=ResolveUrl("~/css/reset.css.css") %>"
but it does not work either and I am not sure what it does. I'm pretty new to all this. The project is ASP.VB btw. The following is the code which seems to be causing the trouble, although none of my images are showing up either. I presume that it is all tied into the one issue though:
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen" />
<link rel="stylesheet" type="text/css" href="layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="nav.css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
<!-- BEGIN: load jquery -->
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui/jquery.ui.core.min.js"></script>
<script src="js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
If I were you, I would use an absolute path instead of a relative one.
<link rel="..." type="..." href="http://www.your.site/whatever/folder/reset.css" media="..:">
Also, instead of ~, try using ../ when moving up a folder.
How can I link to resources such as css and javascript files? My default project is using links like ../../Content/styles.css. How can I do something like ~/content/styles.css?
<link rel="stylesheet" href="<%= Url.Content("~/content/styles.css") %>"
type="text/css" />
<script src="<%= Url.Content("~/content/scripts/file.js") %>"
type="text/javascript"></script>
Leave out the ~. "/Content/styles.css"