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.
Related
I'm using the following external files in my website:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<button disabled>Disabled</button><br>
<button>Not Disabled</button>
Before adding bootstrap+bootbox, my buttons worked as intended, being grayed out when disabled. But now all of my buttons always look the same, whether enabled or disabled.
I've noticed that my button visuals work again, if I don't include the bootstrap3.3.7.min.css. But that also completely breaks any custom popups that are based on bootstrap.
According to the bootbox website I'm using compatible library versions, so I don't know what could cause this behavior.
You are going to want to use class btn if you are using bootstrap so buttons can be visually disabled when disabled.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<button class="btn" disabled>Disabled</button><br>
<button class="btn">Not Disabled</button>
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'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.
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"
I have observed that, very infrequently, Internet Explorer (7 or 8, it does not matter) displays our web pages (www.epsitec.ch) a short time without applying the CSS. The layout appears completely broken, with everything displayed sequentially from top to bottom. When the page has finished loading, everything finally gets displayed properly.
Our web pages do not use any fancy scripting, just two javascript inclusions for QuantCast and Google Analytics, done at the end of the page. By the way, we already had the issue before adding the QuantCast script. The CSS gets linked in the <head> section:
<head>
<title>Crésus Comptabilité</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.epsitec.ch/favicon.ico" />
<link href="../../style.css" rel="stylesheet" type="text/css" />
...
</head>
and then follows static HTML up to the final chunk which includes the JavaScript:
...
<div id="account">
<a class="deselect" href="/account/login">Identifiez-vous</a>
<script type="text/javascript">
_qoptions={qacct:"..."};
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js">
</script>
<noscript>
<img src="..." style="display: none;" border="0" height="1" width="1"/>
</noscript>
</div>
<div id="contact">
Contactez-nous
</div>
<div id="ending"><!-- --></div>
</div>
<script type="text/javascript">
...
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("...");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
As this is a very short visual glitch, I have no idea what provokes it. Worse, I cannot reproduce it and it appears only on seldom occasions. How can I further investigate the cause of the glitch? Are there any best practices I should be aware of?
This is called a FOUC, a Flash Of Unstyled Content, and is well documented and explained here: http://www.bluerobot.com/web/css/fouc.asp/
FOUC has to do with the order of loading external assets like CSS and JS files.
Inline script snippets block downloading of subsequent assets until they are interpreted. This is one of the causes for FOUC.
A best-practice for front-end performance as well as avoiding FOUC is to have your CSS files referenced in the <head> of your document and your JavaScript right before the closing </body> tag.
This makes the browser download styles, render the page, then apply JavaScript.
I did not have the problem, usually has to do with internet connection. CSS loading slowly.
I was having this same problem. I simply switched the order in which stylesheets and javascript were getting loaded in the head of layouts/application.html.erb. So now the stylesheets get loaded first and then the javascript.
Like so:
<head>
<title><%= full_title yield(:title) %></title>
<%= stylesheet_link_tag :application, media: "all" %>
<%= javascript_include_tag :application %>
<%= csrf_meta_tags %>
</head>