Linking CSS/JS in Laravel's Blade Templates - javascript

I noticed earlier that when I added parameters to my routes, this broke my views as it seemed to change the links to my CSS and JS files. After hours of trying to get the HTML package working in Laravel 5.1, I finally gave up and threw in the towel due to Composer issues.
I opted to just take the simple route and go back to linking them directly, however I am now struggling to get even this to work.
<link type="text/css" rel="stylesheet" href="{{ public_path() }}/assets/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="{{ public_path() }}/assets/css/metismenu.min.css">
<link type="text/css" rel="stylesheet" href="{{ public_path() }}/assets/css/sb-admin-2.css">
<link type="text/css" rel="stylesheet" href="{{ public_path() }}/assets/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="{{ public_path() }}/assets/css/datatables.bootstrap.css">
<link type="text/css" rel="stylesheet" href="{{ public_path() }}/assets/css/datatables.responsive.css">
Rather than linking to the local file, its appending the entire string to my base URL and trying to link to that which is obviously wrong.
Current Link:
http://domain.com/home/roster/laravel/public/assets/css/bootstrap.min.css
Correct Link:
http://domain.com/assets/css/bootstrap.min.css
Just linking to "/assets/css/bootstrap.min.css" works fine until I add Route parameters. What can I do to get these links working short of hard coding the entire URL?

Try this one
<link href="<?php echo URL::asset('css/app.css'); ?>" rel="stylesheet" type="text/css">
I believe this will fix your problem
Another solution:
<link type="text/css" rel="stylesheet" href="{{ URL::to('/') }}/assets/css/bootstrap.min.css">

Very rare. I am working with L5.1 and looks good together with HTML package. Just to keep in mind. Require the following package:
"illuminate/html": "~5.0#dev"
Then run composer update. After the package is installed, edit config/app.php adding the provider:
'Illuminate\Html\HtmlServiceProvider',
And facade:
'HTML' => 'Illuminate\Html\HtmlFacade'
Now, lets see some solutions to show your assets links:
Using html facade
{!! HTML::style('assets/css/bootstrap.min.css') !!}
Using raw code calling url() function:
<link type="text/css" rel="stylesheet" href="{{ url('assets/css/bootstrap.min.css') }}">
Using raw code calling URL facade:
<link type="text/css" rel="stylesheet" href="{{ URL::to('assets/css/bootstrap.min.css') }}">
As a note, do not use public_path() because it returns an absolute directory path like /var/www/html/laravel instead an url.

Related

How to keep separate css links in Astro at build time

In Astro.js, when i put these lines in a .astro file :
<link rel="stylesheet" href={ Astro.resolve('../styles/preloader.scss') }>
<link rel="stylesheet" href={ Astro.resolve('../styles/application.scss') } media="print" onload="this.onload=null;this.media='all'">
the result I get at build time is this :
(I am building a multi language site. The 'en' in en.ffae6e3d.css is from the english page /en )
<link rel="stylesheet" href="../assets/application.ddd2d855.css">
<link rel="stylesheet" href="../assets/en.ffae6e3d.css">
How can I get this result ?
<link rel="stylesheet" href="../assets/preloader.css">
<link rel="stylesheet" href="../assets/application.css" media="print" onload="this.onload=null;this.media='all'">
This is the (expected) result I get indevelop mode.
You could try is:inline for loading resource files on the client side without compiling it during build.
https://docs.astro.build/en/reference/directives-reference/#isinline

Why I have the error Failed to load resource: net::ERR_FILE_NOT_FOUND?

i'm making a form with bootstrap, when I open my HTML file from the folder I have the following error and the styles are not loading error
But when I use Live Server in Visual Studio Code to open the HTML there is all Oklive server
Why is it happen and how can I solve it? here is my code:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/practica bootstrap-copia/css/bootstrap.min.css">
<link rel="stylesheet" href="/practica bootstrap-copia/form.css">
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght#400;800&display=swap" rel="stylesheet">
<title>Arma tu cv</title>
<!-- BOOTSTRAP AND JS -->
<script src="/practica bootstrap-copia/js/bootstrap.min.js"></script>
<script src="/scripts.js"></script>
my folders
Thanks for your attention.
I reproduced your problem and found the solution. Remove your leading forward slashes in your hrefs. They need to be relative directory positions, not absolute.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="practica bootstrap-copia/css/bootstrap.min.css">
<link rel="stylesheet" href="practica bootstrap-copia/form.css">
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght#400;800&display=swap" rel="stylesheet">
<title>Arma tu cv</title>

Kendo UI Export into excel

I am using MVC4 with Razor.
Here is my css and java script files code
<link rel="stylesheet" href="~/Content/kendo/kendo.common.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.rtl.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.default.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.dataviz.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.dataviz.default.min.css" type="text/css" >
<link rel="stylesheet" href="~/Content/kendo/kendo.mobile.all.min.css" type="text/css" >
<script src="#Url.Content("~/Scripts/kendo/jquery-1.9.1.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/jszip.min.js")"></script>
but the problem is when I call kendo.all.min.js from live url mean when I add this url
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
then my grid sucessfully exported to excel but if I use this url
<script src="#Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
then upon exporting nothing happens and one more thing that kendo.all.min.js file in the project is same as in live url.
Kindly help.
Its solved!
At my end its not working while debugging but when I deployed on my local server then it started working there.

Bootstrap modal showing or not depending on bootstrap version

I'm relatively new to web programming so I used a couple of templates to create my website, all of them related to Twitter Bootstrap.
My login page correctly shows Bootstrap modals. These are the imports I used there:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
The problems start with the main page after login. It was taken from another template and it uses the following imports:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
As you can see the only change is the source of Bootstrap. In the first case I downloaded it to the css folder, while in the second case it's taken directly from the server.
As a result the modals do not show in the main page (the second one). The screen fades to black but no modal is shown.
If I modify the imports of the main page to take Bootstrap from the css folder instead of the server, the modals do show, but the layout of the whole page is ruined:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
Instead of this:
Any ideas?
Have you add meta tag for responsive in head tag of the page. If not then try to add following meta tag into your head tags of the page.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this will be resolve your problem.
Note : First try this to add into your version in which you imports bootstrap downloaded files.
Ok after some research I solved my problem, I hope others will benefit from it.
This post actually solved it: here
Apparently the syntax for the modal in Bootstrap 3 is different and among other things it has to include these lines:
<div class="modal-dialog">
<div class="modal-content">
So I took the example under the link, tweaked it for my purposes and it worked. Problem solved.

JavaScript url auto-resolution in Asp.Net MVC

I am running Asp.Net MVC 2.0, and I am running into a problem with my JS calls.
this is what I have in my :
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery.js"></script>
Which all works fine if I am on the root level. But if I jump up to something like:
Root/Items/Search/term/Page3
the JS doesn't run load - if I look at the source, the MVC is 'smart enough' to re-route the css, but not the Javascript:
<link href="../../../Content/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery.js"></script>
I must be missing something, there has to be an easy way to do this correctly, any ideas?
To avoid this sort of problems never hardcode links like this. Use helper methods instead:
<link href="<%= Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.js") %>"></script>

Categories