I have my markup setup to show a 3 column twitter bootstrap layout, but instead the divs are stacking. This should be real simple and I cannot figure out why the columns are not being columns.
<div class="container-fluid">
<div class="row">
<div class="header">
<div class=".col-xs-6 .col-sm-4">
<a href="{{ URL::route('home') }}">
<div class="header_group">
<img src="../../images/me.png">
<span><h1 class="header_text">Logo</h1></span>
</div><!--header group -->
</a>
</div>
<div class=".col-xs-6 .col-sm-4">
middle
</div>
<div class=".col-xs-6 .col-sm-4">
#include('layout.navigation')
</div>
</div><!-- main header -->
</div><!-- row -->
</div><!-- container -->
Take out the dots before the class names
<div class="container">
<div class="row">
<div class="header">
<div class="col-xs-6 col-sm-4">
Column1
</div>
<div class="col-xs-6 col-sm-4">
Column 2
</div>
<div class="col-xs-6 col-sm-4">
Column3
</div>
</div><!-- header -->
</div><!-- row -->
</div><!-- container -->
Here is the jsfiddle link
Related
I have two separate divs, one where the images are loaded and the other where the data is displayed.
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide Item -->
<div class="swiper-slide">
<div class="bg" style="background-image: url(include/assets/images/main-slider/1.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
#if(count($listings) > 0)
#foreach($listings as $listing)
<!-- Slide Item -->
<div class="swiper-slide">
<div class="content-outer">
<div class="content-box">
<div class="inner">
<h5>{{$listing->first_name}} {{$listing->last_name}}</h5>
<h1><span>{{$listing->name}}</span> </h1>
<div class="text">{{$listing->property_description}}.</div>
<div class="link-box">View Listing</div>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
</div>
So the first div will also be in a foreach loop, but I dont know how I can combine the two where they show the same related data.
Use 2 foreach loops . It is the easiest and desired solution for you. or you can define two variable and concat the contents using one forloop and then display them later like
#php
$first='';
$second='';
#endphp
#if(count($listings) > 0)
#foreach($listings as $listing)
#php
$first.='first div content';
$second.='second div content';
#endphp
#endforeach
#endif
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
{!!$first!!}
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
{!!$second!!}
</div>
</div>
</div>
<html>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
use for yield
i installed livewire successfully but when i return the page and the page has
this
#livewire('counter')
it returns error
Livewire\Redirector::component(): Argument #1 ($component) must be of type Livewire\Component, App\Http\Livewire\Counter given
here is my test page
#extends('layouts.master')
#section('css')
#section('title')
empty
#stop
#endsection
#section('page-header')
<!-- breadcrumb -->
<div class="page-title">
<div class="row">
<div class="col-sm-6">
<h4 class="mb-0"> </h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb pt-0 pr-0 float-left float-sm-right ">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Page Title</li>
</ol>
</div>
</div>
</div>
<!-- breadcrumb -->
#endsection
#section('content')
<!-- row -->
<div class="row">
<div class="col-md-12 mb-30">
<div class="card card-statistics h-100">
<div class="card-body">
#livewire('counter')
</div>
</div>
</div>
</div>
<!-- row closed -->
#endsection
#section('js')
#endsection
and my livewire/counter.blade.php page
<div>
hello world
</div>
and route
Route::get('test', function () {
return view('test');
});
I am using laravel 6. I have problem with my section where its not display the result on browser. I have place #yield on my layout but half of section still not displayed
here my code
#section('main-content')
<section class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>Detail Tanaman</h2>
</div>
</div>
</section>
<!-- ======= Blog Section ======= -->
<section id="blog" class="blog">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-8 entries">
<article class="entry">
<div class="entry-img">
<img src="/img/bonsai.jpg" style ="width:100%; height:100%;" alt="" class="img-fluid">
</div>
<h2 class="entry-title">
{{$data->nama_tanaman}}
</h2>
here my layout
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
</a>
</div>
</section><!-- End Hero -->
#yield('main-content')
You forget to add extends('master') (master is the name of your master page file) at the first of your section like:
In your master:
#yield('main-content')
In your section file:
#extends('master')
#section('main-content')
...
#endsection
I am trying to create an application with laravel and I am having some difficulty in understanding how to dynamically load content into a division according to the button clicked from the product icon.
This is the category page
<div class="row justify-content-center">
#foreach($ProductData as $Product)
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<div class="product product-7 text-center" title="{{$Product->product_name}}">
<figure class="product-media">
<span class="product-label label-new">New</span>
<a href="product.html">
<img src="{{ asset('images/product/thumbnail/'.$Product->photo) }}" alt="{{$Product->photo}}" class="product-image">
</a>
<div class="product-action-vertical">
<span>add to wishlist</span>
<span>Quick view</span>
<span>Compare</span>
</div><!-- End .product-action-vertical -->
<div class="product-action">
<span>add to cart</span>
</div><!-- End .product-action -->
</figure><!-- End .product-media -->
<div class="product-body">
<div class="product-cat">
Women
</div><!-- End .product-cat -->
<h3 class="product-title">{{$Product->product_name}}</h3><!-- End .product-title -->
<div class="product-price">
$ {{$Product->price}}
</div><!-- End .product-price -->
<div class="ratings-container">
<div class="ratings">
<div class="ratings-val" style="width: 20%;"></div><!-- End .ratings-val -->
</div><!-- End .ratings -->
<span class="ratings-text">(2)</span>
</div><!-- End .rating-container -->
<div class="product-nav product-nav-thumbs">
<a href="#" class="active">
<img src="{{ asset('assets/molla/assets/images/products/product-4-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-2-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-3-thumb.jpg') }}" alt="product desc">
</a>
</div><!-- End .product-nav -->
</div><!-- End .product-body -->
</div><!-- End .product -->
</div><!-- End .col-sm-6 col-lg-4 col-xl-3 -->
#endforeach
</div>
**and mypopup/quickView.html, where I want to load data dynamically is bellow: **
<div class="container quickView-container">
<div class="quickView-content">
<div class="row">
<div class="col-lg-7 col-md-6">
<div class="row">
<div class="product-left">
<a href="#one" class="carousel-dot active">
<img src="assets/molla/assets/images/popup/quickView/1.jpg">
</a>
<a href="#two" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/2.jpg">
</a>
<a href="#three" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/3.jpg">
</a>
<a href="#four" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/4.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
There are two ways you can dynamically load the modal/popup
Store the product details in data-* attribute of quick view button/anchor tag. Have a skeleton Quick View modal. On click of 'Quick View', trigger a javascript function to populate the skeleton modal with the product data fetched from data attributes.
Making AJAX call when user click on 'Quick View' button and populate the skeleton modal with the response data
Going by Approach #1 can you save you multiple network calls to the server as all the product related data (required to be shown in Quick View) is stored as data attributes
Updated
Example for Approach #1
<a class="btn btn-primary btnQuickView" data-product-name="Product Name" data-product-img="http://shop.com/product/image.jpg" data-product-price="200.00">Quick View</a>
Modal code
<!-- Quick View Modal -->
<div id="quickViewModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<h1 id="modal-product-name"></h1>
<img id="modal-product-image" src="">
<p id="modal-product-price"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Load jQuery library -->
<script type="text/javascript">
$(function(){
$('body').on('click','.btnQuickView', function(e){
e.preventDefault();
var data = $(this).data();
$('#quickViewModal #modal-product-name').html(data.productName);
$('#quickViewModal #modal-product-name').attr('src', data.productImage);
$('#quickViewModal #modal-product-name').html(data.productPrice);
$('#quickViewModal').modal();
});
});
</script>
I have default template which is looks like this
when i add my loop it becomes like this
Issue
As you see in second image padding and margins are not as same as default one but html output looks fine
here is the code
<div class="col-md-5 col-xs-12 pad-l">
<div class="row">
#foreach($featuresTwo as $featuret)
#if($loop->first)
<div class="col-sm-12">
<div class="post-overaly-style hot-post-top clearfix">
<div class="post-thumb">
<a href="#">
<img class="img-fluid" src="theme/images/news/tech/gadget2.jpg" alt="" />
</a>
</div>
<div class="post-content">
<a class="post-cat" href="#">
#foreach($featuret->categories as $categoryt)
{{ $loop->first ? ' ' : ', ' }}
{{$categoryt->title}}
#endforeach
</a>
<h2 class="post-title title-large">
{{$featuret->title}}
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
#else
<div class="col-sm-6 pad-r-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="theme/images/news/lifestyle/travel2.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">
#foreach($featuret->categories as $categoryt)
{{ $loop->first ? ' ' : ', ' }}
{{$categoryt->title}}
#endforeach
</a>
<h2 class="post-title title-medium">
{{$featuret->title}}
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
#endif
#endforeach
</div>
</div><!-- Col 5 end -->
Question
Where did I make mistake? How to fix it?
Thanks.
UPDATE
original html without loop
<div class="col-md-5 col-xs-12 pad-l">
<div class="row">
<div class="col-sm-12">
<div class="post-overaly-style hot-post-top clearfix">
<div class="post-thumb">
<a href="#">
<img class="img-fluid" src="images/news/tech/gadget2.jpg" alt="" />
</a>
</div>
<div class="post-content">
<a class="post-cat" href="#">Gadget</a>
<h2 class="post-title title-large">
Samsung Gear S3 review: A whimper, when smartwatches need a bang
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
<div class="col-sm-6 pad-r-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="images/news/lifestyle/travel2.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">Travel</a>
<h2 class="post-title title-medium">
Early tourists choices to the sea of Maldiv…
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
<div class="col-sm-6 pad-l-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="images/news/lifestyle/health1.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">Health</a>
<h2 class="post-title title-medium">
That wearable on your wrist could soon...
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
</div>
</div><!-- Col 5 end -->
........................................................................................................................
The original code for the two half width columns has one like this:
<div class="col-sm-6 pad-r-small">
And one like this:
<div class="col-sm-6 pad-l-small">
But you've used a loop to create two of the same like this:
<div class="col-sm-6 pad-r-small">
You should probably just key the features in the $featuresTwo array and drop the loops so you can replicate the code accurately.
Solved
Based on wheelmaker answer i got the idea and changed my div after #else to be like
#if($loop->last)
<div class="col-sm-6 pad-l-small">
#else
<div class="col-sm-6 pad-r-small">
#endif
and that solved the style issue.
PS: I'm accepting wheelmaker answer because he made me realized the
issue.