This is a migrated thread and some comments may be shown as answers.

DataForm not showing on iOS

2 Answers 97 Views
DataForm
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jonathan Salomon
Top achievements
Rank 1
Jonathan Salomon asked on 28 Apr 2017, 04:49 PM

I am trying out the DataForm functionality of UI Pro v1.6.1 in a very simple login form. On Android it is working ok (I have a small issue for which I will open a separate thread), but on iOS it the form is not displayed at all. I already did `tns platform remove ios && tns run ios` which didn't work either.

Any idea what may be causing this?

Thanks!!

 

The login component looks like this:

import {Component,OnInit} from '@angular/core';
import {SessionProvider} from '../providers/session';
import {ConfigProvider} from '../providers/config';
@Component({
  template: `
    <StackLayout id="container" style="margin:15 30 0 30;">
      <RadDataForm tkExampleTitle tkToggleNavButton [source]="credentials">
        <TKEntityProperty tkDataFormProperty name="username" displayName="E-Mail" index="0">
          <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="password" displayName="Password" index="1">
          <TKPropertyEditor tkEntityPropertyEditor type="Password"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="environment" [valuesProvider]="environments" displayName="Environment" index="2">
          <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
      </RadDataForm>
      <Button text="Sign in" (tap)="doLogin()" class="btn"></Button>
    </StackLayout>
  `,
  styles: [`
    #container { background-color:#efefef; }
  `]
})
export class LoginPage implements OnInit {
  public credentials:any;                      // credentials to pass to backend
  public environments:Array<string> = [];      // environments configured in ConfigProvider
  public selectedEnv:number = 0;               // environment from last successful login
  constructor(public session: SessionProvider, public config: ConfigProvider, public session: SessionProvider) {
  }
  public ngOnInit() {
    this.credentials = this.session.storedCredentials;
    this.config.environments.forEach((env,index) => {
      this.environments.push(env.name);
      if (this.credentials.environment!='' && env.name==this.credentials.environment) { this.selectedEnv = index; }
    });
    console.dump(this.credentials);
  }
  public doLogin() {
    // do something
  }
  //public onEnvSelect(index) {
  //  if (index!==undefined) { this.credentials.environment=this.config.environments[index].name; }
  //}
}

 

The `credentials` object I am feeding to the `RadDataForm` source looks like this:

{
    "username": "",
    "password": "",
    "environment": ""
}

2 Answers, 1 is accepted

Sort by
0
Accepted
Nick Iliev
Telerik team
answered on 01 May 2017, 10:55 AM
Hi Jonathan,

The reason for your issue is as there is a small difference in how iOS and Android are handling layouts with no predefined sizes. IN your case the StackLayout used as a container does not have size and the default layout used for arranging your RadDataForm entities is also stack layout. So basically as the RadDataForm does not have a predefined height in iOS, it won't occupy any space and won't be visible.
To overcome this issue, you have several options:

- Option 1: provide height for your RadDataFrom
e.g.
<RadDataForm height="200" [source]="credentials">
The downside of this method is that you will have to provide hardcore value for your height. Using DIPs (as shown in the example above) is recommended as this will guarantee that you are using device independent measuring system.

- Option 2: another option would be to change your container from StackLayout to GridLayout and then use * as the size for your RadDataForm row (* means take all the available space left).
e.g.
<GridLayout rows="*, auto">
    <RadDataForm row="0"></RadDataForm>
    <Button row="1"></Button >
</GridLayout>
With this technique, your RadDataForm will take all the space that is left. The button is using auto which means it will take only space enough to be fully rendered. Of course, you can also provide a numeric value for row height instead of *, but to visualize your RadDataForm in iOS you can't use auto.


Regards,
Nikolay Iliev
Telerik by Progress
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
Jonathan Salomon
Top achievements
Rank 1
answered on 01 May 2017, 05:10 PM

Indeed this is working. Might be worth noting that you need to use the format <GridLayout rows="*, auto"> as opposed to <GridLayout rows="* auto"> which is working fine for me elsewhere.

Thanks again Nikolay!

Tags
DataForm
Asked by
Jonathan Salomon
Top achievements
Rank 1
Answers by
Nick Iliev
Telerik team
Jonathan Salomon
Top achievements
Rank 1
Share this question
or