I'm building an email template builder in React and I need to be able to have things like Margin (with a capital M) in the style tags of rendered elements. This is for compatibility reasons with older email clients like Outlook.
Writing this:
<table
cellPadding="0"
cellSpacing="0"
style={{
margin: '0 auto',
Margin: '0 auto',
}}
>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Totally ignores the second, uppercase Margin on render. How can I get the second Margin to be applied instead of ignored?
Based on our discussion, you can always make use of Dangerously Set innerHTML to get your desired, custom, output.
React inline styles do not support custom property names at this time.
Related
I have the following code:
<div ng-cloak ng-init="viewAlbum()" class="ng-cloak">
<h3 ng-cloak class="ng-cloak" ng-bind="album.Title"></h3>
<table ng-cloak class="ng-cloak">
<tr>
<td class="label-col"><span class="album-label">Composer</span></td>
<td class="value-col">{{album.Composer}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Release Year</span></td>
<td class="value-col">{{album.ReleaseYear}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Rating</span></td>
<td class="value-col">{{album.Rating}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Reviews</span></td>
<td class="value-col">
<ol>
<li ng-repeat="review in album.Reviews">{{review.Text}}</li>
</ol>
</td>
</tr>
</table>
The problem is that I am seeing a quick flicker when the page load. I'm am not seeing raw unprocessed angular code. Instead, the entire table flickers including the static text such as the labels.
I did some experimenting - when I remove the H3 tag, I no longer see the flicker. So, I believe what is happening is the H3 tag is initially rendered with no value and therefore takes up no vertical space. When the value of the album title is rendered, the table is pushed down, and it is this "pushing down" that is causing the flicker. My theory could be wrong however.
The ng-clock attributes don't mitigate this. I tried a verbose option of surrounding the H3 tag in a container DIV and setting the height and min-height of that DIV in the css but that also isn't preventing the flicker.
As I said, if I remove the H3 tag, there is no flicker. Any suggestions please?
As mentioned in the below link you can Just wrap your h2/h3 tag in a div with display: inline-block; like this:
<div class="header2"><h3></h3></div>
and then add this to your css:
.header2 { min-width: 100px; width: auto; min-height:45px; background-color:#333; color:#FFF; display:inline-block; padding:10px; }
Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/
Check :How do I make an inline element take up space when empty?
I recommend you also to use ng-bind for all your doms and remove the ng-cloak too
This question is about styling a table which is created inside an AngularJS directive. I have an array of objects passed to the directive from HTML file. The directive creates a table and shows each object of the array in a row.
Now my question: There is a self-defined JSON field in each object called name. Styling is done by LESS technology and I want to have a thick separating line behind each row when 'name == david'. Please consider this condition can be different for example when 'rowID%3 ==0' and etc. My general question is how can I access this objects in LESS file and how can I make conditional styling inside LESS.
I'm making a lot of assumptions since you didn't include any code or markup, but in Angular this is a very basic, simple problem, and is independent of whether you are using LESS, Sass, or just plain CSS:
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items track by $index" ng-class="{'thick-separator': isNameDavid(item) || $index%3 == 0}">
<td>{{item.propOne}}</td>
<td>{{item.propTwo}}</td>
<td>{{item.propThree}}</td>
</tr>
</tbody>
</table>
In your controller:
$scope.isNameDavid = function(item) {
return item.name == 'david';
};
Using the ngClass directive and the $index scope variable that is introduced by the ngRepeat directive, you can easily assign a thick-separator class to table rows, conditionally.
Now, it makes no difference if you are using LESS, Sass, or plain CSS:
.thick-seperator {
border-top: 5px solid black;
}
If, however, you are trying to say that you can't change the Angular code and you need to be able to style purely with LESS, then you can style using attribute and nth-child selectors. Note that these are available in plain CSS and LESS is not needed:
table tbody tr:nth-child(3n+3), table tbody tr[data-name="david"] {
border-top: 5px solid black;
}
I want to have all the td's from firstName to email be clickable to link to that specific contact. Do I have to put a Link wrapper on each div? Even if I do, I want the Link to wrap around the entire td, not just the text within it so that the user can click on any part of the td rather than the text itself.
<tr key={index}>
<td><Link to={`/${contact.id}`}><div>{contact.firstName}</div></Link></td>
<td>{contact.lastName}</td>
<td>{contact.city}</td>
<td>{contact.phone}</td>
<td>{contact.email}</td>
<td><input type="checkbox" value="readOnly" checked={that.state.deleteList.includes(contact.id)} onClick={that.addToDeleteList.bind(that, contact.id)}/></td>
</tr>
For link part you are doing it correctly. Just remove <div> from Link tag.
To make whole table cell clickable irrespective of content within it set display of Link to block via css or inlinke css.
e.g.
display: block
Here is CSS for the same.
td a {
display:block;
width:100%;
}
I dont want to show the price if it's value is 0, only show the name and nothing in price then !
If its greater than 0 then it should show both name and price.
How to do that?
<tr>
<td>{{cars.name}}</td>
<td>{{cars.price}}</td>
</tr>
<tr>
<td> {{cars.name}} </td>
<td><div ng-show="cars.price > 0"> {{cars.price}} </div></td>
</tr>
Edit: if ng-show is evaluated to false it will hide the element by applying display:none; to the element style.
you can also use ng-if which will not render the element at all
Use ng-if if you don't want the cell included in the DOM, use ng-show if you want it to be included but not visible.
<tr>
<td>{{cars.name}}</td>
<td ng-if="cars.price > 0">{{cars.price}}</td>
</tr>
If you're worried about HTML validators
<tr>
<td>{{cars.name}}</td>
<td ng-if="cars.price > 0">{{cars.price}}</td>
</tr>
also works.
This will however probably skew your table a bit, since ng-show still uses display:none;. You can fix that by overriding the .ng-hide CSS class that gets assigned to hidden elements and set it to visibility: hidden; instead.
I am new to AngularJS (and Javascript as well) and I try to display different icons in a table depending on a value in a field from my model.
Let's say this is my model:
$scope.MyList = [{ name: "Production", status: "Running"},
{ name: "Test", status: "Stopped"}];
This is a table for displaying the model in one of my views:
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in MyList">
<td>{{instance.name}}</td>
<td>{{instance.status}}</td>
</tr>
</tbody>
</table>
I would like to display the status using both one icon and the text. What is the recommended way of doing it? I would like to use something that feels natural with AngularJS.
Thank you.
The answer from dolgishev pointed me into the right direction.
I initialice my table elements like this:
<tr ng-repeat="item in itemList">
<td>{{item.name}}</td>
<td class="{{item.status}}">{{item.status}}</td>
</tr>
and then I use CSS for displaying the icon using a font from FontAwesome. This is for example the CSS for the state 'Running':
.Running:before {
font-family: 'FontAwesome';
font-size:1.3em;
color:green;
content: '\f00c'; /* the ok icon */
padding-right: 4px; /* plus 4px spacing */
}
This will display the ok icon in green, then 4 pixel padding and then the text for the state "Running". It is looking great!
For solve this you can use Angular's directive ng-class. It allows you to set class of element depend on expression.
Also you can do this without directive, in this way:
<div class="{{MyList.name}}">