DataForm not showing on iOS

Thread is closed for posting
3 posts, 1 answers
  1. Jonathan Salomon
    Jonathan Salomon avatar
    27 posts
    Member since:
    Oct 2016

    Posted 28 Apr 2017 Link to this post

    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. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 01 May 2017 Link to this post

    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.
  3. Jonathan Salomon
    Jonathan Salomon avatar
    27 posts
    Member since:
    Oct 2016

    Posted 01 May 2017 in reply to Nikolay Iliev Link to this post

    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!

Back to Top