I'm currently working with bootstrap grid system and got the following problem:
the solution should be work like that: http://ciiznv.axshare.com/#c=2
<div class="row ">
<div class="col-md-6 col-sm-6 col-xs-12 bg-two col-sm-height col-middle nopadding">
<div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle">
<div class="item">
<div class="content">
<h2>Text one</h2>
<p>lorem ipsum dorem</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle nopadding ">
<div class="item nopadding">
<div class="content">
<img class="lazyload" sizes="(min-width: 40em) 80vw, 100vw"
srcset="http://lorempixel.com/356/150/ 375w, http://lorempixel.com/480/150/ 480w, http://lorempixel.com/768/250/ 768w, http://lorempixel.com/480/480/ 800w" alt="a picture" />
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 bg-three col-sm-height col-middle nopadding">
<div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle">
<div class="item">
<div class="content">
<h2>Text two</h2>
<p>lorem ipsum dorem dolor</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle nopadding">
<div class="item nopadding">
<div class="content">
<img class="lazyload" sizes="(min-width: 40em) 80vw, 100vw"
data-srcset="http://lorempixel.com/356/150/ 375w, http://lorempixel.com/480/150/ 480w, http://lorempixel.com/768/250/ 768w, http://lorempixel.com/480/480/ 800w" alt="a picture" />
</div>
</div>
</div>
</div>
</div>
But in view of 768px, the image will not be displayed
I think that you are missing the .img-responsive class on your images.
See this fiddle
Related
i have problem with for each loop that must get value from table and get sum and count from other tables depends on selected row in loop
here is my code :
$flights = Basic::all();
foreach ($flights as $flight) {
if($flight->cur_allowed_seats > '0'){
$basics_id = Basic::find($flight->id);
$inf_count = Ticket::where([['sector',$flight->sector],['pass_type','3'],['flight_date',$flight->flight_date]])->get()->count();
$child_count = Ticket::where([['sector',$flight->sector],['pass_type','2'],['flight_date',$flight->flight_date]])->get()->count();
$total_sale = DB::table('tickets')
->where([['sector', $flight->sector],['flight_date',$flight->flight_date]])
->sum('sale');
$free_seats_per1= DB::table('basics')->where('id', $flight->id)->first()->cur_total_seats;
$free_seats_per2= DB::table('basics')->where('id', $flight->id)->first()->total_seats;
$free_seats_per=$free_seats_per1/$free_seats_per2*100;
return view('home', array('flights' => $flights,'basics_id' => $basics_id,'inf_count' => $inf_count,
'child_count' => $child_count,'total_sale' => $total_sale,'free_seats_per' => $free_seats_per,
));
}
and here is blade code :
<div class="content-body">
#foreach($flights as $flight)
<h1 class="content-header-title mb-0">{{ $flight->sector }} <span style="color: red">{{ $flight->flight_date }}</span></h1>
<!-- eCommerce statistic -->
<div class="row">
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info" >{{ $flight->cur_total_seats }}</h3>
<h6 style="font-size:12px;font-weight: bold">المقاعد الشاغرة بحائل</h6>
</div>
<div>
<i class="icon-flag info font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
{{-- {{ format_number((($basics_has->cur_total_seats/$basics_has->total_seats) * 100), 2) }}%--}}
<div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: {{ $free_seats_per }}%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info" >{{ $child_count }}</h3>
<h6 style="font-size:12px;font-weight: bold">عدد الأطفال المحجوز بحائل</h6>
</div>
<div>
<i class="icon-user-following info font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: {{ $flight->percent }}%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="success">{{$inf_count}}</h3>
<h6 style="font-size:12px;font-weight: bold">عدد الرضع المحجوز بحائل</h6>
</div>
<div>
<i class="la la-user success font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-success" role="progressbar" style="width: 80%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="danger">{{$total_sale}}</h3>
<h6 style="font-size:12px;font-weight: bold">إجمالي مبيعات حائل</h6>
</div>
<div>
<i class="la la-dollar danger font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-danger" role="progressbar" style="width: 85%"
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
my problem is that any value from any table except 'Basic' it return only one value not loop
can any one help me with this issue please ?
I have a Spring Boot application and want to display the exception on the error page.
I put the error.html page in the template directory and I can see the change, but the exception variable keeps coming back as null. I can see all the other data like message and stacktrace.
I took this from several examples. What is missing?
Thymeleaf
<div class="row rowDesign">
<div class="col-md-4 ml-auto">
<span class="legend">Date</span>
</div>
<div class="col-md-8">
<span th:text="${timestamp}"></span>
</div>
</div>
<div class="row rowDesign">
<div class="col-md-4 ml-auto">
<span class="legend">Error</span>
</div>
<div class="col-md-8">
<span th:text="${error}"></span>
</div>
</div>
<div class="row rowDesign">
<div class="col-md-4 ml-auto">
<span class="legend">Status</span>
</div>
<div class="col-md-8">
<span th:text="${status}"></span>
</div>
</div>
<div class="row rowDesign">
<div class="col-md-4 ml-auto">
<span class="legend">Message</span>
</div>
<div class="col-md-8">
<span th:text="${message}"></span>
</div>
</div>
<div class="row rowDesign">
<div class="col-md-4 ml-auto">
<span class="legend">Exception</span>
</div>
<div class="col-md-8">
<span th:text="${exception}"></span>
</div>
</div>
<div class="row rowDesign">
<div class="col-md-4 ml-auto">
<span class="legend">Trace</span>
</div>
<div class="col-md-8">
<span th:text="${trace}"></span>
</div>
</div>
Add this to your application.properties:
server.error.include-exception=true
server.error.include-stacktrace=always
These properties are not enabled by default (See https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-application-properties.html)
I am creating a web application using Laravel, vue-router and MySQL database. I created a dashboard component and a bank component. When I run my project, the Dashboard component loads with all the CSS and javascript. But when I change to the Bank component, CSS may be loaded but some javascript cannot run. After refreshing the entire bank component page, the previously non-running javascript then executes.
this is my web.php file
<?php
Route::get('/{any}', function () {
return view('welcome');
})->where('any', '.*');
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
This is my index.js file
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Dashboard from "./components/Dashboard";
import Bank from "./components/Bank";
import Demo from "./components/Demo";
import Company from "./components/Company";
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard,
},
{
path: '/bank',
name: 'bank',
component: Bank,
},
{
path: '/company',
name: 'company',
component: Company
},
],
})
const app = new Vue({
el: '#app',
router,
});
This is my Dashboard Component file
<template>
<div class="container-fluid">
<!-- Page-Title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Dashboard</h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item">Stexo</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
</div>
<!-- end row -->
</div>
<div class="row">
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-cube-outline bg-primary text-white"></i>
</div>
<div>
<h5 class="font-16">Active Sessions</h5>
</div>
<h3 class="mt-4">43,225</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">75%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-briefcase-check bg-success text-white"></i>
</div>
<div>
<h5 class="font-16">Total Revenue</h5>
</div>
<h3 class="mt-4">$73,265</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">88%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-tag-text-outline bg-warning text-white"></i>
</div>
<div>
<h5 class="font-16">Average Price</h5>
</div>
<h3 class="mt-4">447</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">68%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-buffer bg-danger text-white"></i>
</div>
<div>
<h5 class="font-16">Add to Card</h5>
</div>
<h3 class="mt-4">86%</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">82%</span></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Area Chart</h4>
<div id="morris-area-example" class="morris-charts morris-chart-height"></div>
</div>
</div>
</div>
<!-- end col -->
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Donut Chart</h4>
<div id="morris-donut-example" class="morris-charts morris-chart-height"></div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Friends Suggestions</h4>
<div class="friends-suggestions">
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-2.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Ralph Ramirez</h5>
<p class="text-muted">3 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-3.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Patrick Beeler</h5>
<p class="text-muted">17 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-4.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Victor Zamora</h5>
<p class="text-muted">12 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-5.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Bryan Lacy</h5>
<p class="text-muted">18 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-6.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">James Sorrells</h5>
<p class="text-muted mb-1">6 Friend suggest</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Sales Analytics</h4>
<div id="morris-line-example" class="morris-chart" style="height: 360px"></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Recent Activity</h4>
<ol class="activity-feed mb-0">
<li class="feed-item">
<div class="feed-item-list">
<p class="text-muted mb-1">Now</p>
<p class="font-15 mt-0 mb-0">Andrei Coman posted a new article: <b class="text-primary">Forget UX Rowland</b></p>
</div>
</li>
<li class="feed-item">
<p class="text-muted mb-1">Yesterday</p>
<p class="font-15 mt-0 mb-0">Andrei Coman posted a new article: <b class="text-primary">Designer Alex</b></p>
</li>
<li class="feed-item">
<p class="text-muted mb-1">2:30PM</p>
<p class="font-15 mt-0 mb-0">Zack Wetass, <b class="text-primary"> Developer Moreno</b></p>
</li>
<li class="feed-item pb-1">
<p class="text-muted mb-1">12:48 PM</p>
<p class="font-15 mt-0 mb-2">Zack Wetass, <b class="text-primary">UX Murphy</b></p>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- START ROW -->
<div class="row">
<div class="col-xl-12">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Active Deals</h4>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Amount</th>
<th scope="col">Contact</th>
<th scope="col">Location</th>
<th scope="col" colspan="2">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Philip Smead</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$9,420,000</td>
<td>
<div>
<img src="front/images/users/user-2.jpg" alt="" class="thumb-md rounded-circle mr-2"> Philip Smead
</div>
</td>
<td>Houston, TX 77074</td>
<td>15/1/2018</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Brent Shipley</td>
<td><span class="badge badge-warning">Pending</span></td>
<td>$3,120,000</td>
<td>
<div>
<img src="front/images/users/user-3.jpg" alt="" class="thumb-md rounded-circle mr-2"> Brent Shipley
</div>
</td>
<td>Oakland, CA 94612</td>
<td>16/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Robert Sitton</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$6,360,000</td>
<td>
<div>
<img src="front/images/users/user-4.jpg" alt="" class="thumb-md rounded-circle mr-2"> Robert Sitton
</div>
</td>
<td>Hebron, ME 04238</td>
<td>17/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Alberto Jackson</td>
<td><span class="badge badge-danger">Cancel</span></td>
<td>$5,200,000</td>
<td>
<div>
<img src="front/images/users/user-5.jpg" alt="" class="thumb-md rounded-circle mr-2"> Alberto Jackson
</div>
</td>
<td>Salinas, CA 93901</td>
<td>18/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>David Sanchez</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$7,250,000</td>
<td>
<div>
<img src="front/images/users/user-6.jpg" alt="" class="thumb-md rounded-circle mr-2"> David Sanchez
</div>
</td>
<td>Cincinnati, OH 45202</td>
<td>19/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- END ROW -->
</div>
</template>
<script>
export default {}
</script>
This is my Bank component file
<template>
<div class="container-fluid">
<!-- Page-Title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Add Bank</h4>
</div>
<!-- <div class="col-sm-6">-->
<!-- <ol class="breadcrumb float-right">-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'dashboard' }">Dashboard</router-link></li>-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'bank' }">Master</router-link></li>-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'bank' }">Bank</router-link></li>-->
<!-- <li class="breadcrumb-item active">Add Bank</li>-->
<!-- </ol>-->
<!-- </div>-->
</div>
<!-- end row -->
</div>
<!-- Starting of Button Section-->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
<div class="button-items">
<button type="button" data-toggle="modal" data-target="#elegantModalForm" class="btn btn-outline-primary waves-effect waves-light">Add Bank</button>
</div>
</div>
</div>
</div>
</div>
<!-- Starting of Modal -->
<!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning modal-lg" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="modal-header text-center">
<h3 class="modal-title w-100 font-weight-bold py-2 white-text" id="myModalLabel"><strong>Add Bank Information</strong></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="container-fluid">
<form class="form-group">
<div class="row">
<div class="col-md-12 md-form">
<input type="text" class="form-control">
<label>Name of Bank *</label>
</div>
</div>
<div class="row">
<div class="col-md-12 md-form">
<textarea type="text" class="form-control md-textarea"></textarea>
<label>Address / Branch *</label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<select class="browser-default custom-select">
<option value="">Account Holder Name</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
</div>
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Bank Account *</label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Bank Routing *</label>
</div>
<div class="col-md-6 md-form">
<input type="date" class="form-control datepicker">
<label>Opening Bal Date * </label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Opening Balance *</label>
</div>
<div class="col-md-6 md-form">
<input type="text" class="form-control datepicker">
<label>Current Cheque no * </label>
</div>
</div>
</form>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<button class="btn btn-outline-danger" data-dismiss="modal">Close</button>
<button class="btn blue-gradient">Add</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
<!-- Ending of Modal -->
<!--Ending of Button Section-->
</div>
<!-- end container-fluid -->
</template>
<script>
export default {}
</script>
I have this model that I have multiple instances of it in a list. I want to pass this to my UI and have the UI figure out how to draw this.
data class InfoModel(val icon: String, val title: String, val text: String {
}
The controller.
#GetMapping("/index")
fun start(model: Model): String {
val list = getList()
model ["list"] = list
return "index"
}
Now in the UI I would like this to be duplicated but I don't know how.
<div class="row">
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center"><div class="icon color-1 d-flex justify-content-center mb-3"><span class="align-self-center icon-layers"></span></div></div>
<div class="media-body p-2">
<h3 class="heading">Title</h3>
<p>Text here.</p>
</div>
</div>
</div>
</div>
What I tried and it doesn't display anything.
{{#list}}
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center">
<div class="icon color-1 d-flex justify-content-center mb-3"><span
class="align-self-center icon-{{icon}}"></span></div>
</div>
<div class="media-body p-2">
<h3 class="heading">{{title}}</h3>
<p>{{text}}</p>
</div>
</div>
</div>
{{/list}}
Big thanks to JBNizet for helping me through this. (You should post the answer, you did all the hard work).
{{#list}}
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center">
<div class="icon color-1 d-flex justify-content-center mb-3"><span
class="align-self-center icon-{{icon}}"></span></div>
</div>
<div class="media-body p-2">
<h3 class="heading">{{title}}</h3>
<p>{{text}}</p>
</div>
</div>
</div>
{{/list}}
Reference:
https://scalate.github.io/scalate/documentation/mustache.html#Non_Empty_Lists
HTML code:
<div class="card-body">
<div class="row align-items-center mb-4">
<div class="col">
<h1>Data and Tools</h1>
</div>
</div>
<a href="/reports">
<div class="row my-4 align-items-center clickable">
<div class="col my-3">
<span class="semi-bold">Reports</span>
<div class="stamp-md">
Create, run and schedule reports.
</div>
</div>
<div class="col-1 text-right">
<i class="fas fa-chevron-right gray-light small"></i>
</div>
</div>
</a>
<hr class="inner-divider">
Ruby code:
wait.until { #browser_def.find_element(css: ".card-body > a")}.attribute("href").text("Reports").click()
How can I click link which stands for 'Reports'?
I have found the correct answer for it:
wait.until { #browser_def.find_elements(css: 'a[href$="/reports"] div.clickable').first}.click()