Alignment of TextInput and CheckBox on Android, works on iOS

[mrmccormack]

Problem description

I need to align CheckBox and TextInput widgets on iOS and Android It works perfectly on iOS, but I can't achieve alignment on Android. I know I can use different layouts depending on device with a simple conditional.

I have tried different numbers in this: top: 'prev() -26' but no sucess in alignment on Android It's like Android doesn't respond to -26.

I have tried using ID's (Selector strings) and different top: parameters for JUST Android, but have not been able to align.

The TextInput must be type='multiline' - as users can type in and the widgets below must move down.

Baseline will not work for CheckBox, even though it does contain text. I am aware of: "For multiline texts, the platforms currently differ: Android aligns on the first line, iOS on the last line."

Expected behavior

• see iOS screenshot, that is what I'm trying to do on Android

Environment

Tabris.js version: 2.5 Device: iPhone 7 OS: iOS 10.3.3 - Android

Screenshots

Code snippet (works on /playground)

const {CheckBox, TextInput, TextView, ui} = require('tabris')

new TextView({
  left: 10, top: 10, right: 10,
  text: 'TITLE',
  alignment: 'center'
}).appendTo(ui.contentView)

let chkItem1 = new CheckBox({
  id: 'chkItem1',
  left: 10, top: 'prev() 10',
  checked: true,
  text: '1.'
}).appendTo(ui.contentView)

let txvItem1 = new TextInput({
  top: 'prev() -26', left: 80, right: 10,
  message: 'Type here, then confirm',
  type: 'multiline',
  text: 'hello1'
}).appendTo(ui.contentView)

let chkItem2 = new CheckBox({
  id: 'chkItem2',
  left: 10, top: 'prev() 10',
  checked: true,
  text: '2.'
}).appendTo(ui.contentView)

let txvItem2 = new TextInput({
  top: 'prev() -26', left: 80, right: 10,
  message: 'Type here, then confirm',
  type: 'multiline',
  text: 'hello2'
}).appendTo(ui.contentView)

let chkItem3 = new CheckBox({
  id: 'chkItem3',
  left: 10, top: 'prev() 10',
  checked: true,
  text: '3.'
}).appendTo(ui.contentView)

let txvItem3 = new TextInput({
  top: 'prev() -26', left: 80, right: 10,
  message: 'Type here, then confirm',
  type: 'multiline',
  text: 'hello3'
}).appendTo(ui.contentView)

[cookieguru]

Per #1406 I would recommend against using negative offsets

[mrmccormack]

. Thanks, I was not aware of that issue. I have it working on iOS and Android now.

. It was easy to re-write my snippet, with only positive offsets. Now I can incorporate in my app.

const {CheckBox, TextInput, TextView, ui} = require('tabris')

new TextView({
  id: 'txv',
  left: 10, right: 10, top: 10,
  text: 'TITLE',
  alignment: 'center'
}).appendTo(ui.contentView)

let chkItem1 = new CheckBox({
  id: 'chkItem1',
  left: 10, top: ['#txv', 10],
  checked: true,
  text: '1.'
}).appendTo(ui.contentView)

let txvItem1 = new TextInput({
  id: 'txv1',
  left: 80, right: 10, top: ['#txv', 10],
  type: 'multiline',
  text: 'hello1'
}).appendTo(ui.contentView)

let chkItem2 = new CheckBox({
  id: 'chkItem2',
  left: 10, top: ['#txv1', 10],
  checked: true,
  text: '2.'
}).appendTo(ui.contentView)

let txvItem2 = new TextInput({
  id: 'txv2',
  left: 80, right: 10, top: ['#txv1', 10],
  type: 'multiline',
  text: 'hello2'
}).appendTo(ui.contentView)

let chkItem3 = new CheckBox({
  id: 'chkItem3',
  left: 10, top: ['#txv2', 10],
  checked: true,
  text: '3.'
}).appendTo(ui.contentView)

let txvItem3 = new TextInput({
  id: 'txv3',
  left: 80, right: 10, top: ['#txv2', 10],
  type: 'multiline',
  text: 'hello3'
}).appendTo(ui.contentView)

[mrmccormack]

Feature Request

• why not consider adding CheckBox to baseline - since CheckBox can contain text.

[mpost]

Closing this issue as resolved. Please reopen if you have any more issues.