{{{number this.col1}}} in this expression 'number' keyword i am not able to understood properly , this keyword truncating decimal values
{{#each dataObject.listArr}}
<h5 class="card-title m-0">{{{number this.col1}}}</h5>
<p class="card-text m-0 font-weight-bold {{this.color}} text-uppercase text-wrap" style="font-size:9px">{{this.col2}}</p>
<hr class="my-3">
{{/each}}
Related
So I'm struggling to format an accordian in bootstrap 4 which I'm using alongside django
The basic issue with my formatting is illustrated in the picture below. The headline in the text is spilling over to outside the column of the accordian. I feel like this should be a simple fix but I can't figure it out. Code pasted below
<div class='col-xs-12 col-md-4'>
<h3> ATP tennis </h3>
<hr/>
<div id="accordion">
{% for obj in tennis %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="first1 btn btn-link collapsed newwrap" data-toggle="collapse"
data-artid="{{obj.id}}" data-target="#tnis_{{ obj.id }}" aria-expanded="false"
aria-controls="tnis_{{ obj.id }}">
{{obj.headline}}
</button>
</h5>
</div>
<div id="tnis_{{ obj.id }}" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body body_pad"><a href='{{obj.url}}' target="_blank" class='body_col'>
{{obj.summary}} </a><br>
<div class="rght3">
<i id="{{obj.id}}" class="likes fa fa-thumbs-up" data-artid="{{obj.id}}" style="font-size:25px;color:#6666ff;"></i>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
I feel like this should in theory be a pretty simple fix. Any help would be much appreciated. The {{obj.headline}} is the culprit that is spilling over (which sits within a button tag)
I have the following code:
<h2 id="yachts" class="mt-0">Our Yachts</h2>
<div class="card-group">
{{ $pages := sort (where $.Site.RegularPages "Section" "boats") "Weight" "asc" }}
{{ range $pages }}
<div class="card">
<img src="{{ .RelPermalink | safeCSS }}{{ .Params.heroimage | safeCSS }}" class="card-img-top" alt="...">
<div class="card-body clearfix">
<h4 class="card-title">{{ .LinkTitle }}</h4>
<p class="card-text border-light border-top border-bottom">
<span class="row">
<span class="col-6 text-muted text-left">
{{- partialCached "icons/users.svg" . -}}{{ .Params.pax }}
</span>
<span class="col-6 text-muted text-right">
{{- partialCached "icons/bed.svg" . -}}{{ .Params.bunks }}
</span>
</span>
</p>
<p class="card-text">{{ .Description }}</p>
Learn More
</div>
</div>
{{ end }}
</div>
(The logic stuff inside of the {{ tags is Hugo templating markup (Golang) which is irrelevant at this point).
The result of this code looks like this in one of the uses:
I would like to position the buttons on the same level (bottom right of each card).
I tried doing it via position relative on the card and position absolute on the buttons, but that positions them at their current location, not the real bottom of the card. What would be the "flex way" to tell these buttons where they belong?
Try min-height for .card-text
.card-text{
min-height:250px;
}
It turns out that Bootstrap offers the card-footer class that does exactly what I wanted to achieve. Using bg-light or our own class for styling then can make it look right.
<div class="card-footer bg-light">
Learn More
</div>
From the documentation:
When using card groups with footers, their content will automatically line up.
I am trying to style the post in the loop in alternate styling using Custom Content Short code plugin. Some what like this.
Example image of post styling using bootstrap col-offset
This is what i'm trying
<?php start_short(); ?>
[loop type=service orderby=date order=ASC]
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
[/loop]
<?php end_short(); ?>
What I want to display is:
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
How can I achieve this?
The above code was generating a loop of post in WordPress with single class of col-md-offset-7 to every post.
What I did was use jQuery even function to delete class from alternate post.
$("div.service-post:even").removeClass("col-md-offset-7");
There are two each loops , the outer loop 'fields' 'name' value is referenced by the inner loop using {{lookup this ../name}} and is rendering correctly.Each {{../message}} can contain an element {{name}}. I wish with the '{{lookup this ../name}}' being null or undefined that renders nothing rather that a blank space. I was hoping there was an easy way to us if to resolve this.I tried to use an {{#if this ../name}} {{/if} around the area but an error generated e.g.
{{#each ../message}}
{{#if this ../name}}
<a href = "https://issues.jboss.org/browse/{{key}}">
<button class="mini ui blue button"><i class="key icon"></i> {{key}}</button></a>
<button class="mini ui blue basic button">{{lookup this ../name}}</button><br>
{{/if}}
{{/each}}
TypeError: Cannot read property 'includeZero' of undefined
Here is the code as it stands.
<div class="ui raised segment">
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
Results
</div>
<div class="content">
<p class="transition hidden">
<div class="ui styled accordion">
{{#each fields}}
<div class="title">
<i class="dropdown icon"></i>
{{name}}
</div>
<div class="content">
<p class="transition hidden">
{{#each ../message}}
<button class="mini ui blue button"><i class="key icon"></i> {{key}} </button>
<button class="mini ui blue basic button">{{lookup this ../name}}</button><br>
{{/each}}
</p>
</div>
{{/each}}
</div>
</p>
</div>
I'm trying to create a view where I show the bootstrap thumbnails on the same line, I've tried different methods and I'm showing thumbnails type list.
Here is my method in the controller:
public function show($id)
{
$properties = Property::find($id);
$files = File::where('property_id', $properties->id)->get();
return view('properties.show', compact('properties', 'files'));
}
This is my method in the view:
#foreach($properties->files as $index=>$file)
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
</div>
#endforeach
This way they are showing the images as thumbnails:
This should be the right way:
Can someone guide me to correct this small inconvenience?
You should loop inside your .row. The foreach method just repeats every code inside of it. So it was repeating <div class="row">...</div> every single time.
<div class="row">
#foreach($property->files as $index => $file)
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>