Prehistory:
I've created CRUD for entity, and now trying to apply my styles to that CRUD's pages.
My problem looks like:
As you see css-files are loading from "/mannapp/vdservers", but they should be loaded from "/".
What should I do?
Routing for this page:
manapp_vdservers_index:
path: /manapp/vdservers/
defaults: { _controller:MainBundle:VDServers:index }
methods: [GET]
Links for assets looks like this:
<link href="css/general.css" rel="stylesheet">
Actually all of my routes with level more than 1 works bad:
/page - css will be loaded well
/page/page1 - css will be loaded from /page/css
Your path in href is relative (it doesn't start with /). This means that css/general.css is added to the current URI (not the location of the template). So when visiting a page on URI /something/foo, the stylesheet is loaded from /something/css/general.css.
What you need is an absolute path: /css/general.css.
To fix things even more, you can use Symfony's asset() helper function. This function expects one argument, which is a path relative to the web/ directory of your application.
So change your line to either <link href="/css/general.css" rel="stylesheet"> or <link href="{{ asset('css/general.css') }}" rel="stylesheet"> (recommend).
Related
I'm using laravel 8
when I create a route for admin
Route::group(['prefix' => 'admin'], function () {
Route::get('/', function () {
return view('layouts.adminlayout');
});
});
and try to display the admin page
if I Type this route : http://localhost:8000/admin without slash after admin I see the page work perfectly
but when I add slash after admin : http://localhost:8000/admin/ The page appears without style
You have used a relative path in your link:
<link rel="stylesheet" href="css/something.css">
Relative paths are computed by:
taking the base URL of the document (usually the URL of the document)
removing everything after the last / in the path
appending the relative path
So your two URLs give the following results:
/admin:
http://localhost:8000/admin
http://localhost:8000/
http://localhost:8000/css/something.css
/admin/:
http://localhost:8000/admin/
http://localhost:8000/admin/
http://localhost:8000/admin/css/something.css
http://localhost:8000/css/something.css and http://localhost:8000/admin/css/something.css are different URLs and one of them is going to throw a 404 Not Found error response.
Use an absolute path instead:
<link rel="stylesheet" href="/css/something.css">
Absolute paths are computed by:
taking the base URL of the document
removing everything after the hostname and (optional) port number
appending the absolute path
… so you'd get the same result for each of your base URLs.
I find the solution
use : <link href="{{asset('style.css')}}" rel="stylesheet">
instead of : <link href="style.css" rel="stylesheet">
thank you #Quentin
I'm currently trying to set up a project in Fat-Free-Framework 3.6 - but I dislike the idea of having to manually add all my basic routes to routes.ini, and I decided I wanted to try my hand at more dynamic routes.
For this, I've made 2 new GET routes. Here is what I have:
$f3->route('GET /#module','{#module}_controller->index');
$f3->route('GET /#module/#method','{#module}_controller->#method');
The first one is to load a controller and it's default method (Which I have made index in these examples).
The first route works great, if I navigate my browser to http://example.com/ex1, it will load controller ex1_controller and run the index method, and everything will run and display properly.
The second route however, does not work as expected. When trying to run the exact same method within the second route, I get no CSS. For example, if I now navigate to http://example.com/ex1/index, there is no CSS on the page - but when I inspect the page source, I see the CSS should be loaded in as <link rel="stylesheet" type="text/css" href="assets/css/uikit.min.css"> is in the page.
Upon further investigation, I followed the link to the CSS file in my source code which brought me to the incorrect link. During the 2nd route, for some reason it's not trying to load from the root. It's trying to load from the URL ./ex1/assets/css/uikit.min.css, but the CSS actually exists in ./assets/css/uikit.min.css
Structure:
index.php - Where routes are defined
| app
| controllers
Controller.php
ex1_controller.php
| models
ex1.php
| views
| ex1
index.htm
| assets
| css
uikit.min.css
| js
uikit.min.js
ex1_controller.php
<?php
class ex1_controller extends Controller {
function index() {
$example = new ex1($this->db);
$output = $example->returnOutput();
$this->f3->set('output', $output);
echo $this->template->render('ex1/index.htm');
}
}
The Controller.php file is run on every route, which is then extended by the controller for the module. This is where the main_header.htm file is loaded in, which contains the css/js links. This is how the links are defined in main_header.htm;
<link rel="stylesheet" type="text/css" href="assets/css/uikit.min.css">
<script src="assets/js/uikit.min.js"></script>
<script src="assets/js/uikit-icons.min.js"></script>
Why is F3 trying to load CSS/JavaScript from the wrong directory when using dynamic routes such as this, and how can I fix it?
The fix for this seems to be quite easy.
Simply add a slash to the beginning of the linked resource path.
<link rel="stylesheet" type="text/css" href="/assets/css/uikit.min.css">
<script src="/assets/js/uikit.min.js"></script>
<script src="/assets/js/uikit-icons.min.js"></script>
In the application I built I have a view called main (http://127.0.0.1:8000/main). Following is how I load the view file from Route file, web.php.
Route::resources(['/main' => 'pages\MainController']);
Above loads the 'main.blade.php' view controller from the index function of MainController.php file.
public function index() {
return view('pages\'main');
}
My problem is, I have an edit button in the view which the href value is set as following.
<a href="main/{{$data->id}}/edit" >Edit</a>
Click of the above will direct me to 'http://127.0.0.1:8000/main/1/edit' route
and this route will not load any styles and javascript files like it was loaded in 'http://127.0.0.1:8000/main' . What is the work around to retain the resource styles and js functionality ?
Following is one example I have linked my resource css in my main layout blade
<link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet
You need to include the resource URLs within url php function.
{{url('vendors/font-awesome/css/font-awesome.min.css')}}
So the complete code is.
<link href="{{url('vendors/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet">
href="{{ URL :: asset ( ' your css path ') }}"
Make sure you css is in public directory
I have a sub-view that extend my master-view, and for some reasons all my css doesn't seem to load only on that page. I extend them as usual like I normally do.
view show.blade.php
#extends('layouts.internal.master')
#section('content')
TESTING ...
#stop
I notice, it only break on that route : /account/112
Any hints / suggestion on this will be much appreciated !
Without seeing your file paths or how you are loading your CSS, it's very difficult for us to say but it sounds like your file paths are wrong.
There is a difference between these two:
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="/css/app.css">
Note the forward slash.
The first one is relative to your current path. So, for example, if you're currently at http://localhost:8000/account/112, the first one is like saying http://localhost:8000/account/css/app.css, which is most likely unwanted behavior. The second one is relative to the root directory so it will always be http://localhost:8000/css/app.css, which is probably what you want to do.
Laravel also comes with helpers function like asset so if you decide to use that and do something like this:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
It will generate an absolute URL / full path from your root URL. So, it'll generate something like this:
<link rel="stylesheet" href="http://localhost:8000/css/app.css">
/account and /account/112 can not access same path in same way. Like if /account access a image like 'images/img/img.jpg' , /account/112 need to access it like '../images/img/img.jpg'. Its all about folder structure. Now for your problem you need to use asset like below (laravel 5 specific)
// if you have save css file at as root/public/css/main.css
{!! HTML::style('css/app.css') !!}
remember to add to composer.json
"illuminate/html": "5.*"
And to aliases
'Form' => Illuminate\Html\FormFacade::class,
'HTML' => Illuminate\Html\HtmlFacade::class
Point to be noted:
{{asset('css/some.css')}}
this is for laravel4. you wont get it working in laravel 5.
I added a bootstrap template to laravel 5 Resources directory.
And added only the index.php to views in Resources.
The index.php file is pointing the files like :
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
And its not loading.
In my routes.php i am loading :
Route::get('/', function () {
return view('index');
});
As I can see in the code, ViewFinder does a case sensitive search for a template based on whatever you provide to the view() helper.
Pass Index to view() instead of index or change the template name from Index.php to index.php.
If your view renders correctly, but CSS file is not loaded, it means it's inaccessible to the browser. Files that are not returned via Laravel need to end up somewhere in /public folder so that web server can read them and return to the browser. You need to place them there manually or using some build toos (gulp, grunt, ...).
In your case, your bootstrap file must end up in public/bootstrap/css/ folder.
You could also fetch the bootstrap file from a CDN by using one of absolute URLs you can find here: http://www.bootstrapcdn.com/, e.g.:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
Add bootstrap files inside the public folder. Suppose your bootstrap file inside the laravel\public\css then:
{!! Html::style('css/style.css') !!}
and jquery files laravel\public\js
{!! Html::script('js/jquery.js') !!}