A Meteor client template helper contains an array of objects {image: url, label: description}. The URL can either point to a valid image file in the public directory or be the string 'non'.
The description can range from a few words to several lines of text.
I am seeking a solution to display the image on the left side of the label under the following conditions:
- If there is no image available, the label should utilize the space meant for the image.
- In cases where the label is lengthy and no image is present, the absence of the image should not create an empty space between this item and the preceding one.
My current code, as shown below, does not meet both requirements. Is there a better approach to achieving this functionality? Thank you.
.list-item {
margin: 1em;
}
input {
display: block;
width: 100%;
}
.checks-row li {
vertical-align: middle;
display: inline-block;
}
li .non {
display: none;
}
img[src="/non"] {
display: none;
}
.check-image {
width: 3.5em;
}
<template name="checks">
<form>
<div class="list-item">
<input type="text" placeholder="Start typing, fast find">
</div>
<div class="list-item">
{{#each values}}
<ul class="checks-row" data-key={{this.key}}>
<li class="check-image {{this.image}}">
<img src="/{{this.image}}">
</li>
<li class="check-label">{{this.label}}</li>
</ul>
{{/each}}
</div>
</form>
</template>