eclipsesource / eclipsesource/tabris-js
Composite inside CollectionView is not visible
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 171
- PR merge metrics
- No merged PRs in 30d
Description
### Problem description
Composite inside the CollectionView cell is not visible. I set the background color for the status indicator Composite on `updateCell` method but the status indicator Composite is not visible at all on Android.

### Expected behavior
The status indicator Composite is visible and showing the correct background color depending on the condition like on iOS:

### Environment
- Tabris.js version: 2.x-nightly
- Device: Galaxy Tab 3 (SM-T820)
- OS: Android 8.0.0
### Code snippet
**app.tsx:**
```TypeScript
import { ui, device, CollectionView, TextView, Composite, CompositeProperties, Widget } from 'tabris';
import { ComponentJSX } from 'tabris-decorators';
console.log("start app");
const signatures = [{ label: 'Foo bar', required: false }, { label: 'Foo bar 2', required: true }];
class SignatureList extends Composite {
public jsxProperties: ComponentJSX;
constructor(properties?: CompositeProperties) {
super(properties);
this.append(
this._createCell()}
updateCell={(cell: any, index: number) => this._updateCell(cell, index)}
/>
);
this.find(CollectionView).first().load(signatures.length);
}
private _createCell() {
const cell = new Composite({
class: 'signature-cell',
highlightOnTouch: true,
padding: { top: 4, bottom: 4, left: 0, right: 0 }
});
new Composite({ height: 50 }).appendTo(cell);
new Composite({
class: 'statusIndicator',
top: 8,
bottom: 8,
width: 8,
left: 16,
}).appendTo(cell);
new TextView({
class: 'txtTitle',
right: 0,
centerY: 0,
left: ['.statusIndicator', 8],
font: 'normal 22px',
textColor: 'black'
}).appendTo(cell);
return cell;
}
private _updateCell(cell: Widget, index: number) {
const signature= signatures[index];
let statusColor = 'green';
if (signature.required) {
statusColor= 'red';
}
cell.apply({
'.signature-cell': { background: index % 2 ? 'yellow' : 'white' },
'.txtTitle': { text: signature.label },
'.statusIndicator': { background: statusColor }
});
}
}
ui.contentView.append(
);
```
Contributor guide
Assessment
This issue has not been assessed yet.