eclipsesource / eclipsesource/tabris-js

Composite inside CollectionView is not visible

Open
#1,899 3 comments 0 reactions 0 assignees View on GitHub
android bug
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.

![20190626_170410](https://user-images.githubusercontent.com/7130712/60191593-df161b00-9834-11e9-948f-c08762cb4229.jpg)

### Expected behavior

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

![IMG_0056](https://user-images.githubusercontent.com/7130712/60191685-053bbb00-9835-11e9-9d3f-cdacfd6031a3.jpg)

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.