with Sendgrid dynamic template, I'm trying to figure out how to use dynamic data for style property so I can change text color depending on some dynamic data.
in the following example, I'm trying to use dynamic data colorHash such as #ddd for style color property. but it doesn't seem to work. so I'd appreciate it if anyone knows how to dynamically change text color in a smart way.
<p style="color: {{ colorHash }}">Ciao {{{ username }}}</p>
Contacted the sendgrid support team, they told me how to achieve what I want to do.
pass css in string as dynamic data, not just color hash you wanna use, so you can insert it into style property in a dynamic template html.
dynamic_data: {
yourCSS: `color: ${yourDynamicColor};`
}
in template html,
<span style={{ yourCSS }}>Dynamic Color Text</span>
Related
I'm trying to allow an author to change the heading size in the markup based on a dropdown in the dialog with the options "h1, h2, h3, h4". If none is selected, it should default to h2.
I'm trying to do this with ternary code like I would for dynamic classes or content, but when I do this it just prints the code out on the page. The result of the following should be <h2> Heading </h2> or have h2 replaced by a dialog selection
<${properties.headingSize ? properties.headingSize : 'h2'}>
${properties.heading}
</${properties.headingSize ? properties.headingSize : 'h2'}>
The result of this code in Inspect Element is
<${properties.headingSize ? properties.headingSize :="h2" }>Heading <!--${properties.headingSize-->
Is this not a recommended way to accomplish dynamic markup? Or is there a way to get the ternary to work correctly?
The recommended way to solve your problem is to make use of the data-sly-element statement to replace your element name. Sample usage is shown below.
<h2 data-sly-element="${properties.headingSize || 'h2'}">${properties.heading}</h2>
For more information on the acceptable values for data-sly-element as well as the available block statements that can be used in HTL, kindly refer this official documentation
I'm trying to dynamically change the color of Ionic's Ion-Toggle and Ion-Checkbox at runtime. I know I can change it to a pre-defined sass variable like this:
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
where "somePredefindedColor" is the string of the predefined sass variable...but because there is a section in my app that adapts to the corporate design colors of a company (which it gets from server as hex-strings) this is not possible.
The closest I got was to query the document by the component's class ".toggle-icon" and set its background color. This works at the first load but as soon as the page is loaded again it falls back to the sass predefined colors...
Have you tried this:
<ion-toggle [style.color]="colorVariable"></ion-toggle>
Where colorVariable is a variable in your component in .ts file, which you can change it dynamically:
if (this.redCondition)
this.colorVariable = 'red';
else
this.colorVariale = 'black';
Alternatively, you can define two CSS classes in your SCSS file, call it red-toggle, and black-toggle. Then you can:
<ion-toggle [class.red-toggle]="redCondition" [class.black-toggle]="!redCondition"></ion-toggle>
These methods are called style and class binding respectively.
If you want to dynamically change a value in your css style, you can use ngStyle directive:
[ngStyle]="{ 'background-color': hexColorString}"
EDIT:
The problem is that ion-toggle after transpile will have two child nodes, and you want to change the style of those child nodes dynamically. These nodes are toggle-icon, and toggle-inner:
This is not the cleanest way of doing it, but you can use the following typescript code, and modify it so that the colors change dynamically:
var div1 = document.getElementById('mytoggle').getElementsByTagName('div');
if(div1[0]){
div1[0].style.backgroundColor = '#0F0';
var div2 = div1[0].getElementsByTagName('div');
if(div2[0])
div2[0].style.backgroundColor = '#00F';
}
Notice that you have to set "mytoggle" as the id of the ion-toggle element in your html file.
Disclaimer: This code is rather hacky and may not work correctly with future versions of Ionic!
You just need to add square brackets on the dynamic attribute that is receiving the variable.
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
Predefined colors can be setup in the theme/variables.scss file under $colors
$colors: (
primary:#48B0F7,
secondary:#10CFBD,
....
somePredefinedColor:#000
)
Which can then be added to the [color] attribute
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
In the past I have built labels for my form like this:
<label wicket:for="name"><wicket:label><wicket:message key="name"></wicket:message></wicket:label>:</label><input wicket:id="name" type="text"/>
Do I still need to use the wicket:label tag? I am not using wicket:label in wicket 7 and it seems to work fine. I may not be understanding the purpose of using wicket:label. It seems like wicket:label is just additional markup. Below is what I am doing now. Is this correct?:
<label wicket:for="name"><wicket:message key="name"></wicket:message>:</label><input wicket:id="name" type="text"/>
This example is related to Wicket XHTML tags
Have a look at the JavaDoc of AutoLabelResolver and AutoLabelTextResolver.
The <label wicket:for="name"> is handled by AutoLabelResolver. It links the HTML label tag to the HTML form component (in your case the input tag) by filling in the correct ID in the HTML for attribute of the label. It also adds css classes to the label tag for for example errors, so you can style the text in the label tag in case of an error.
The <wicket:label> has two purposes. If you give it a value either by the key attribute (as you did) or by having some text between the tags, the text is set as the label model of the Java FormComponent, which then is used in validation messages like this '${label}' is required. (see LabeledWebMarkupContainer#setLabel and LabeledWebMarkupContainer#getLabel).
If you don't assign any text to the <wicket:label> tag, then it is used as output. That means the value of the label model of your Java FormComponent is used to replace the tag.
If you have no <wicket:label> in the HTML markup and no label model set in your Java code, then your Java FormComponent will have an empty label model and Wicket falls back to using the Wicket ID as label. So depending on how your Wicket IDs look, you will get validator messages like 'user_name' is required. instead of something nice looking like 'User name' is required.
I want to combine dynamically generated tables with a human created content formatted in html in the same document. The ultimate target will probably be PDF. The human generated content will generally consist of formatted text, tables and images. The formatting and layout requirements are generally fairly simple. This content will be specified in html, styled with css. The content itself will static in nature in that it will not be generated from data, but it could be sourced from files or a database. Is there a way to do this?
Static text and Text field element support html syntax (you just have to chose it in properties), but you have to use in line style formatting. Something like:
<span style="color: #999">Some gray text</span><span style="color: #000"> black text</span>
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.