I have this:
#foreach($portfolios as $portfolio)
<div id="item-portfolio-expand{{$portfolio->id}}" class="item-portfolio-expand expand">
<div class="container">
<div class="row">
<div class="col-md-8">
col-md-8
</div>
<div class="col-md-4">
{{ __('Name')}}: {{ $portfolio->name }}
</div>
</div>
</div>
</div>
#endforeach
And this:
#foreach ($portfolios as $portfolio)
<div class="portfolio-item {{ $portfolio->tag }} " data-category="transition">
<img src="{{ $portfolio->image_show }}">
<a href="#item-portfolio-expand{{$portfolio->id}}" data-toggle="collapse" data-target="#item-portfolio-expand{{$portfolio->id}}" data-parent="#item-portfolio-expand{{$portfolio->id}}">
<div class="portfolio-item-overlay">
<p class="name-item-overlay">{{ $portfolio->name }}</p>
</div>
</a>
</div>
#endforeach
And when I press the in the first foreach, I want to toggle the second foreach at <div id = "item-portfolio-expand {{$ portfolio-> id}}" class = "item- portfolio-expand expand "> I just don't succeed at anything, I use bootstrap and jquery in the project. .item-portfolio-expand has display: none;
And at the same time when one is open and another is selected, to close the one already open and to appear the one selected with toggle.
Related
I have a laravel 8 project with materializecss carousel with cards. The carousel is showing 5 items by default. If I have 5 items or more in the DB, then everything is fine. However with less than 5 items, the items are stacking on the left. I need them to be centered all the time doesnt matter the count of them. Here is my code:
<div class="col s12 l12 center">
<div class="carousel center">
#foreach($properties as $property)
<div class="carousel-item col m4 s8 l3">
<div class="card sticky-action borders-top borders-bottom" style="height: 400px;">
<div class="card-image waves-effect waves-block waves-light" style="height: 50%;">
#if($property->cover() != NULL)
<img class="activator" src="{{ url($property->cover()) }}" alt="office" style="height: 100%;" />
#endif
</div>
<div class="card-content activator">
<p class="activator">#foreach($property->locations as $location)
{{ $location->name }}
#endforeach </p>
<span class="card-title activator grey-text text-darken-4"> {{ $property->property_address }}
<p class="activator"> {{ $property->starting_price }} kr</p>
</span>
<p class="activator">{{ $property->propertyType->name }} - {{ $property->m2 }} kvm, {{ $property->size }}</p>
<p class="activator">{{ $property->plot_size }} kvm tomt</p>
<div class="card-action">
<span class="activator left viewing">Visas: {{ \Carbon\Carbon::parse($property->viewing_date)->isoFormat('ddd D/M') }}</span>
<span class="activator right viewing_date bostadonline-text mr-1">Mer Info...</span>
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4"> {{ $property->property_address }} <i class="material-icons right">close</i>
<p class="activator"> {{ $property->starting_price }} kr</p>
</span>
<p> {{ $property->short_description }} </p>
<p class="center"> Lägg bud </p>
</div>
</div>
</div>
#endforeach
</div>
</div>
Well I was overcomplicating things. I had set fullWidth on carousel to true and that messed things up. Then I had added some unnecessairy css modifcations that I had to remove. Basically, the solution was to set fullWidth to false on carousel properties. I didn't need to change my code on the question.
Let’s say I have a foreach post that shows the last 5 posts, and I would like to position them as the boostrap featurette (with text and image changing To left and right side: example: https://getbootstrap.com/docs/4.0/examples/carousel/
i tried but it's not display well and not responsive. so if you have time, pls help.
<div class="container">
#foreach($posts as $post)
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">{{ $post->title }}</h2>
<p class="lead">{{ $post->title }}</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" src="{{ asset('assets/img/laptop-1385702_1920.jpg') }}" alt="Generic placeholder image">
</div>
</div>
<br>
#endforeach
</div>
--> not working : result
im newbie about statamic,
im try to solve this code :
<div class="container">
<div class="intro">
<div class="row">
<div class="col-md-12">
<h2 class="title-uppercase text-white">{{ section_three_title }}</h2>
<div class="row-project-box row">
{{ relate:section_three_categories }}
{{ entries }}
<div class="col-project-box col-sm-6 col-md-4 col-lg-3">
<a href="{{ url }}" class="project-box">
<div class="project-box-inner">
<h5>{{ title }}</h5>
</div>
</a>
</div>
{{ /entries }}
{{ /relate:section_three_categories }}
</div>
view all projects <i class="icon icon-chevron-right"></i>
</div>
</div>
</div>
</div>
the code provide this :
i want to align these box
direzionale operativo dirigenziale not in horizonatal but in vertical like this:
direzionale
operativo
dirigenziale
i think that is a bootstrap configuration but i dont know about the statamic world
anyone can help me ?
thanks a lot
The problem here seems that you are using responsive breakpoints on your columns,
so if you want to set the boxes one below the other all the times you have to set the .col-project-box always be full-width adding this class col-12 and set the .row-project-box horizontal alignment center adding this class justify-content-center to it.
<div class="container">
<div class="intro">
<div class="row">
<div class="col-md-12">
<h2 class="title-uppercase text-white">{{ section_three_title }}</h2>
<div class="row-project-box row justify-content-center">
{{ relate:section_three_categories }}
{{ entries }}
<div class="col-project-box col-12">
<a href="{{ url }}" class="project-box">
<div class="project-box-inner">
<h5>{{ title }}</h5>
</div>
</a>
</div>
{{ /entries }}
{{ /relate:section_three_categories }}
</div>
view all projects <i class="icon icon-chevron-right"></i>
</div>
</div>
</div>
I've created a list of items that have an icon next to them where I'm trying to click the icon and have it populate a modal that contains the information, and this will be used to delete/edit things as I add to them.
The issue is that now when I click the icon it doesn't seem to pop up any modal at all. Before I added the $key it at least triggered a modal but each one had the info for the first item in the array. Now I"m simply trying to add a key to the necessary item so that if I click the icon I get a modal with only the info for that item.
What am I doing wrong here?
#foreach($nodes as $key => $node)
<div class="uk-width-1-1">
<div class="uk-grid ">
<div class="uk-width-2-6">
{{$node->id}} - {{$node->name}}
</div>
<div class="uk-width-2-6 ">
<span>{{ $node->comment }}</span>
</span>
</div>
</div>
</div>
#endforeach
#foreach($nodes as $key => $node)
<div id="edit-edit-modal{{ $key }}" class="uk-modal">
<div class="uk-modal-dialog">
<div class="uk-width-1-1">
<div class="uk-grid uk-grid-small">
<div class="uk-width-2-10">
{{$node->id}} - {{$node->name}}
</div>
<div class="uk-width-2-10 testComment">
<span>{{ $node->comment }}</span>
</div>
</div>
</div>
</div>
</div>
#endforeach
Put both divs in one foreach
#foreach($nodes as $key => $node)
<div class="uk-width-1-1">
<div class="uk-grid ">
<div class="uk-width-2-6">
{{$node->id}} - {{$node->name}}
</div>
<div class="uk-width-2-6 ">
<span>{{ $node->comment }}</span>
</span>
</div>
</div>
</div>
<div id="edit-edit-modal{{ $key }}" class="uk-modal">
<div class="uk-modal-dialog">
<div class="uk-width-1-1">
<div class="uk-grid uk-grid-small">
<div class="uk-width-2-10">
{{$node->id}} - {{$node->name}}
</div>
<div class="uk-width-2-10 testComment">
<span>{{ $node->comment }}</span>
</div>
</div>
</div>
</div>
</div>
#endforeach
I'm currently working on a photo gallery index.
How can I make it so that my loop iterates all 4 columns and then proceeds making a new row?
This is my code:
<div class="row">
#foreach($photoGalleries as $photoGallery)
<div class="col-md-3">
<a href="{{ url('/photogalleries/' . $photoGallery->id) }}">
<img class="img-fluid" style="height: 200px; width: 200px;" src="/images/{{ $photoGallery->cover_image }}">
</a>
<h3>{{ $photoGallery->name }}</h3>
</div>
#endforeach
</div>
Now as you can imagine, it'll appear like this:
Alternative solution:
Add margin-top after the col-md-3 attribute, like so:
<div class="col-md-3" style="margin-top: 20px;">
</div>
$collectionOne = $photoGalleries->chunk(4);
#foreach($collectionOne as $collectionTwo)
<div class "row" >
#foreach($collectionTwo as $photoGallery)
<div class="col-md-3">
......
</div>
#endforeah
</div>
#endforeach