I have a .blade.php view that is nice and well designed with css, but when I put a variable like {{$data}} or even inside a for each loop {{$d->col1}} the css design get away.
What is the reason to be
#foreach($data as $d )
{{$d->price}}
#endforeach
I corrected myself
I changed
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
to
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
And the problem solved.
Related
I've been trying to set up owl carousel for quite some time now and none of the answers I read seemed to work. So, I began to wonder if it just simply won't work or am I missing something here.
I tried pretty much every possible solution I could find but did not get it to run...
I am using laravel app view with #yield('content') and on the home page I'm inserting the actual content along with the owl carousel.
In the blade.app file I linked all the scripts and css files like so:
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/jquery.min.js') }}" defer></script>
<script src="{{ asset('js/owl.carousel.min.js') }}" defer></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
autoPlay: 1000,
items:10,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:10
}
}
});
});
</script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.carousel.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.theme.default.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.theme.green.min.css') }}" rel="stylesheet">
When I load the page noting is showing up. I tried some other bootstrap carousels and they seem to work, but I like this one since it has draggable elements and looks cool...
Here is what it looks like in the editor:
app.blade.php page
carousel page
Delete the defer and try again by using correct link, may be sometimes the link has to be in incorrect form.
I just installed laravel 5.5 and the good news is, I finally managed to get npm run dev/production working. The manifest file looks fine too. In my bladeview I am using these lines:
#if($userIsLoggedIn)
<link href="{{ mix('build/ccs/admin.css') }}" rel="stylesheet">
#else
<link href="{{ mix('build/ccs/auth.css') }}" rel="stylesheet">
#endif
But loading the page results in the following error:
So I was like, lets go into the mix helper and dump some data to see what it looks like... :
dd($manifest, $path); gives :
Is it just me, or does the index actualy exists? using
dd($manifest[$path]);
actualy results in Undefined index. The weirdest thing, when I write the link outside of the conditional like this:
<link href="{{ mix('build/css/auth.css') }}" rel="stylesheet">
<!-- Styles -->
{{-- #if($userIsLoggedIn)
<link href="{{ mix('build/ccs/admin.css') }}" rel="stylesheet">
#else
<link href="{{ mix('build/ccs/auth.css') }}" rel="stylesheet">
#endif --}}
then if all works fine! no errors or undefined indexes whatsoever, versioning/non versioning.. all loads :P There is some stuff going on here that I don't understand.. Any1 has any ideas??
EDIT::
Using these lines at the bottom of the body works fine too..
#if($userIsLoggedIn)
<script src="{{ mix('/build/js/admin.js') }}"></script>
#endif
)) try to change way of css files)
mix('build/ccs/admin.css') => mix('build/css/admin.css')
etc.)
It should be 'build/css/admin.css' instead of build/ccs/admin.css.
I lose my bootstrap styles when passing variable (get) to route->Controller->View in Laravel 5.4.
here is my code-
header.blade.php->
<a href="{{URL::to( '/news/'.$v_all_published_category->id )}}">
web.php->
Route::get('/news/{id}', 'NewsController#view_news');
NewsController.php->
public function view_news($id) {
$category_info = Category::where('publication_status', 1)->get();
$category_product = Product::where('id', $id)->get();
$data = array();
$data['header_content'] = view('Front_End.includes.header', ['all_published_category' => $category_info]);
$data['home_slider']= view('Front_End.slider.home_slider');
$data['main_content'] = view('Front_End.category.category_content', ['category_product' => $category_product]);
$data['footer_content']= view('Front_End.includes.footer');
return view('Front_End.master')->with($data);
}
#EdwardPalen
<!DOCTYPE html>
<html>
<head>
<title>NewsFeed</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/animate.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/font.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/li-scroller.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/slick.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/jquery.fancybox.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/theme.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('page_assets/assets/css/style.css')}}">
</head>
<body>
<a class="scrollToTop" href="#"><i class="fa fa-angle-up"></i></a>
<div class="container">
#yield('header_content')
#yield('slider')
#yield('main_content')
#yield('footer_content')
</div>
{{ Html::script('page_assets/assets/js/jquery.min.js') }}
{{ Html::script('page_assets/assets/js/wow.min.js') }}
{{ Html::script('page_assets/assets/js/bootstrap.min.js') }}
{{ Html::script('page_assets/assets/js/bootstrap.min.jss') }}
{{ Html::script('page_assets/assets/js/jquery.li-scroller.1.0.js') }}
{{ Html::script('page_assets/assets/js/jquery.newsTicker.min.js') }}
{{ Html::script('page_assets/assets/js/jquery.fancybox.pack.js') }}
{{ Html::script('page_asset`enter code here`s/assets/js/custom.js') }}
</body>
</html>
Have you tried using the blade helper tags?
When the directory level in the URL changes the styles don't get found. You should use the helpers Laravel provides to generate a full URL.
Try to integrate it like this in the app.blade.php file:
There's assets()
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet">
Or even a helper to create the full link tag for including:
{{ HTML::style('assets/css/bootstrap.min.css') }}
(And there's one for javascript files too)
{{ HTML::script('assets/js/script.js') }}
You can take as reference of this issue in this link:
I lose my bootstrap styles when passing variable (get) to route->Controller->View in Laravel 4
A solution and method that I use frequently.
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet">
You can include CSS and JS files, and you can put them directly in the public / css or public / js folder and then link them from the layout with the asset () function:
I am probably missing something very simple but, when I link my style sheet I get:
<link media="all" type="text/css" rel="stylesheet" href="http://laravel.dev:8000/public/css/masterCss.css">
showing on the webpage rather then linking to my css file.
My Html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Nub Life</title>
{{ Html::style('/public/css/masterCss.css') }}
</head>
<body>
#yield('content')
</body>
</html>
Why is this happening and how can I fix it?
the stylesheet href url, should not contain the word public. this is how you can generate url for your css asset files
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/masterCss.css') }}">
Suppose you have a .css file in your public/your_project_name/css/style.css
Simply write
<link href="{{ URL::asset('your_project_name/css/style.css') }}" rel="stylesheet">
Wondering how can I link with blade syntax to my jquery/javascript files?
<script src="../../public/js/jquery.min.js"></script>
<script src="../../public/js/bootstrap.js"></script>
This didn't work:
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/jquery.min.js') }}">
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/bootstrap.js') }}">
URL::to($param) directs to your root folder (/public) and adds the string folders. URL::to('js/bootstrap.js') directs to /public/js/bootstrap.js. this looks correct to me.
although you used a css linking tag for javascript. try using:
<script src="{{ URL::to('js/jquery.min.js') }}"></script>
<script src="{{ URL::to('js/bootstrap.js') }}"></script>
You should use the following:
<script src="{{ URL::asset('/js/jquery.min.js') }}"><script/>
<script src="{{ URL::asset('/js/bootstrap.js') }}"><script/>
This will always work. If you are creating a package in workbench this is also the way to go.
And if you want to publish your assets to public you will do:
php artisan asset:publish --bench="vendor/package"