I want to have an html element with two classes defined by twig variables.
I can do it with one twig variable and they both work separately. But once I try to have them together, only the first class is effective.
I searched on the forum but found only about twig classes or two classes direct in html.
With Twig I have:
<p class={{"type#{item.type1}"}}> Paragraph </p>
In html it should be:
<p class="type1 type2"}}
When I try to combine both as below, it does not work:
<p class={{"type#{item.type1} type#{item.type2}"}} > Paragraph </p>
I also have tried the other concat method with ~ but without sucess.
How to concatenate strings in twig
And instead of the space I have tried to add as explained here also unsucessful:
How to add space between variables in twig template?
Your forgot the wrap your attribute value in quotes. HTML will treat the 2nd class as another attribute, not being part of the class attribute
<p class="{{"type#{item.type1} type#{item.type2}"}}">Paragraph</p>
Related
I want to render <h1 class="page-heading">#Html.Sitecore().Field(TPage.Headline)</h1> when #Html.Sitecore().Field(TPage.Headline) contains a value but also I doesn't want to render the enclosing tag <h1 class="page-heading"> when the field are empty.
Using #Html.Sitecore().Field(TPage.Headline, new { #class="page-heading", EnclosingTag="h1"}) almost does what I want but it doesn't include the css class.
How do I specify a class name for the enclosing tag using the Sitecore HTML helper? Or are there another way to avoid rendering empty tags?
I'm not sure how to do it with the Field helper method, but the old-school way of doing things could be done like this:
#if(!String.IsNullOrEmpty(TPage.Headline)){
<h1 class="page-heading">#Html.Sitecore().Field(TPage.Headline)</h1>
}
In your case, you don't have anything to output when the field is empty, so a simple IF check should work.
Thanks #Jay S, so far I've ended up with:
#if( Sitecore.Context.PageMode.IsExperienceEditor)
|| Model.Item.FieldHasValue(TPage.Headline)
{
<h1 class="page-heading">#Html.Sitecore().Field(TPage.Headline)</h1>
}
#if ( Sitecore.Context.PageMode.IsExperienceEditor
|| Model.Item.FieldHasValue(TPage.Ingress))
{
<p class="ingress">#Html.Sitecore().Field(TPage.Ingress)</p>
}
It works but I don't like the clutter, would've preferred two one liners instead of 8-10 rows.
<p class="smallText">{{vehicleItem.registration}}, {{vehicleItem.colour}} {{vehicleItem.make}} {{vehicleItem.model}}</p>
I'd like to capitalize vehicle registration and model and make should be camel case
I will suggest wrapping registration and make with a span containing different classes e.g.
<p><span class="capitalize">{{vehicleItem.registration}}, {{vehicleItem.colour}} <span class="camel-case">{{vehicleItem.make}} </span> {{vehicleItem.model}}</p>
This way you are adding "two" css rules to one element. I also recommend you achieve the camelcase style using Javascript.
You can write as many classes into an HTML tag as you want, thereby applying as many CSS rules as you want. Example:
<p class="smallText myclass_1 myclass_2">
I'm not experienced with angular but you should be able to use different functions like
capitalizeFirstLetter(vehicleItem.registration)
and
camelize(vehicleItem.model)
Converting any string into camel case
How do I make the first letter of a string uppercase in JavaScript?
In a template I need to assign more than one CSS class to a div.
However, when I try something like the following, the Closure compiler seems to wrap only the first class in quotation marks, resulting in the browser ignoring the rest.
<div class={foreach $cssClass in $cssClasses}{$cssClass} {/foreach}>...</div>
DOM result
I tried wrapping the whole thing in quotation marks (with and without {literal})... didn't do the trick.
Wrap class in quotations
<div class="{foreach $cssClass in $cssClasses}{$cssClass} {/foreach}">...</div>
So, I am working on a html email template and I see this code.
What does it mean when it says:
<div style='{{container}}'></div>
what do the two curly brackets within the style tag indicate?
its angular.js code
angular.js uses {{ }} to bind variables to HTML,
in your condition, the CSS style class name is stored in the variable "container" and then used in the code
This way the application programmer can change the style class of the div from JAVASCRIPT easily based on different conditions
if you don't need dynamic styles, just remove the {{container}} part and replace it with the CSS style class name you have
static version will be somthing like this:
<div style='myCLassName'> .... </div>
Maybe you work on laravel views. So in blade {{ }} means < ?php ?>
In this case it was set "container" in controller and was passed to view as variable.
Why would I use one over the other, except if I need to define the style from a function?
<div once-style="{width:50%;}"/>
once-style
<div style="width:50%;"/>
HTML Style Attribute
If i have a fixed style in an AngularJS application is there a reason to use one over the other?
I tried finding relevant information, i just found this which really didn't answer my question.
One time binding is native to Angular. Inside the curly braces prefix the expression with a double colon. For example:
{{::name}}