I am trying to run a foreach loop to return the title and price. But i need the results to go into different boxes, one has a background img, the other has no background img. The boxes alternate down the page.
]3
I assume that you're referring to dynamic adding a class card-w-bg to your cards.
Solution 1: Adding background boolean to your card and use it to determine.
#foreach($cards as $card)
<div class="col-4">
<div class="card x-auto #if($card->background) card-w-bg #endif">
{{ $card->title }}
{{ $card->description }}
</div>
</div>
#endforeach
Solution 2: In your case, it seems like the background appears at the odd number of your cards. Use the loop variable.
<div class="#if($loop->odd) card-w-bg #endif">
However, the $loop->even only works in Laravel 5.8. Use #if($loop->iteration % 2) instead if below Laravel 5.8
Have you tried this? http://image.intervention.io/api/text
Hint: you can capture the image size and do the math to set the text X,Y for the text overlay.
Related
Using Thymeleaf th:each loop, whitespace is removed (or can't be added).
Thymeleaf code:
<div>
</div>
I expected:
<div>
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
but html rendered below.
<div>Link 1Link 2Link 3Link 4Link 5</div>
How to add whitespace (in html file new line) using Thymeleaf th:each?
My Thymeleaf version is 3.0.12.RELEASE
If you want the links to be arranged horizontally with a single white space between them (as opposed to arranging them vertically using display:block) then you can use the Thymeleaf synthetic <th:block> element (documented here):
<div>
<th:block th:each="item : ${items}">
</th:block>
</div>
This will give you the same layout as you show in your question, when you run the first code snippet.
Update:
You can also use <span> instead of <th:block>, if you prefer:
<div>
<span th:each="item : ${items}">
</span>
</div>
This will give you the same end result (links arranged horizontally with a space between them), but the HTML generated to produce this layout will, of course, be slightly different.
I have a 2 columns grid in a uk-container and what I actually want to achieve is for the second column to take up the rest of the horizontal space available. What would be the best pratice using uikit? Thanks.
you should look into uk-width-expand
You can use like below - Perfect for you:
<div class="uk-container" uk-grid>
<div class="uk-width-1-3">Fixed Width</div>
<div class="uk-width-expand">the rest of the horizontal space available</div>
OR You can use like below if you want to generate width according content:
<div class="uk-container" uk-grid>
<div class="uk-width-1-3">Fixed Width</div>
<div class="uk-width-auto">the rest of the horizontal space available</div>
Note : uk-width-auto only generates width as per content.
I am trying to change the font size of a text in mat-toolbar, but nothing seems to work . In the plunker example i have 2 spans 'AAA product' and 'some long description' . how do i change the font size of these elements . applying style to the span doesnt seem to take effect. Any help is much appreciated.
<button mat-button (click)="sidenav.toggle()" >
<mat-icon>menu</mat-icon>
</button>
<span>AAA product </span>
<span class="test"></span>
<span style="font-height=10px">Some Longer description</span>
<span class="fill-remaining-space"></span>
plunker link
Use CSS:
<span style='font-size:333%;'>AAA product</span>
There's some more info on https://material.angular.io/guide/typography
I'm completely new to SCSS and I'm trying to set a background color to all items of a selector.
My css selector is the following, and returns all items (of two seperate UL lists)
#g-showcase .g-menu-item
I set a color array as:
$colors: #fad941, #ffffff, #e02520, #a6a6a6, #c6c6c6, #e02520;
I would like to iterate over my selector results and set a unique color from my color array (which could be larger than the above).
I started playing with some code, but I tackled it incorrectly, as I'm iterating over colors and not over selector items. (Don't know how to do that :( )
#for $i from 1 through length($colors) {
#g-showcase li:nth-child(#{length($colors)}n+#{$i}) {
background: nth($colors, $i)
}
}
How could I achieve the desired result?
Thank you !
S.
The problem you have is - as far as SASS is concerned - it's ignorant to how many li items your HTML code has, it's a pre-processor that never really see's the DOM, so it wouldn't know when to stop generating CSS
I assume what your looking to do is have the ability to select which color each li item has set as it's background, rather than as you currently have it, which is applying colors in the order they appear in the color array.
To do this you could add some additional markup to you HTML to give the generated CSS and slightly tweak how your creating the array, using a map instead. You might be looking to avoid polluting your HTML will erroneous mark-up, but the below would work.
$colorz: (
foo: #f24162,
bar: #591240,
fee: #4c5573,
fum: #6fa0a6,
eye: #71d9d9
);
#each $pointer, $bgcolor in $colorz
{
#g-showcase li[pointer="#{$pointer}"] {
background: $bgcolor;
}
}
<ul id="g-showcase">
<li class="g-menu-item" pointer='bar'>The quick</li>
<li class="g-menu-item" pointer='foo'>Brown Fox</li>
<li class="g-menu-item" pointer='fee'>Jumped over</li>
<li class="g-menu-item" pointer="bar">the lazy</li>
<li class='g-menu-item' pointer="eye">dog</li>
</ul>
<ul id="g-showcase">
<li class="g-menu-item" pointer="fum">...and other exciting stories</li>
<li class="g-menu-item">that you hear from time-to-time</li>
</ul>
Note The above wont 'run' as it's sass, so there's a working version over on CodePen http://codepen.io/anon/pen/GJLXMq
I have a small project, where i first tried Zurb Foundation framework, heavily using SASS variables for customization, and i got one problem.
I use their block-grid extensively, and i need to change $block-grid-default-spacing: variable value to rem-calc(2), but only inside a #gallery element, and leave it at default value elsewhere.
If it helps, i use simple code for my gallery (with some irrelevant Smarty templating)
<section id="gallery-container" class="row">
<ul id="gallery" class="clearing-thumbs small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-clearing>
{foreach from=$offer->photos->get() item=photo}
<li>
<img src="{$photo->image->thumb(true, 295, 230, 5)}" alt="{$offer->title->get()}"/>
</li>
{/foreach}
</ul>
</section>
From the docs on the Foudation page, I think they have a mixin that is available to create your own block-grid. The following was take from http://foundation.zurb.com/docs/components/block_grid.html:
.your-class-name {
#include block-grid(
// This controls how many elements will be on each row of the block grid. Set this to whatever number you need, up to the max allowed in the variable.
// Available options: 1-12 by default, and false.
$per-row: 3,
// This controls how much space is between each item in the block grid.
// Use a variable or any pixel or em values.
$spacing: $block-grid-default-spacing,
// This controls whether or not base styles come through, set to false to leave out.
$base-style: true
);
}
Using block-grid mixin turned out to be a great idea that solved my problem. That's how my code looked like in the end:
#gallery
#media #{$small-up}
+block-grid(2, rem-calc(3))
#media #{$medium-up}
+block-grid(3, rem-calc(3))
#media #{$large-up}
+block-grid(4, rem-calc(3))