Aligning and Borders around editors

3 posts, 1 answers
  1. Brian
    Brian avatar
    12 posts
    Member since:
    Apr 2018

    Posted 06 Jan Link to this post

    Hey Guys, I've been working with dataforms and I have it close but not quite to the spec I'm trying to achieve.  Attached is a "SignUp" screen and I'm using your "Reservation" renderer on iOS.  There are two things missing from my render that I need help with.  First, I'd like to put a full boarder around each field.  Second, I'd like the fields to align on the left near their icons and span across the white space.   I'm adding my login screen because it has the fields look and feel that I'm trying to match.  If you can point me to the documentation or any additional samples that show this I would greatly appreciate it.

    Attached: 

    SignUp - Needs help

    Login - The look I'm trying to achieve...

    Thank you!

    Brian

     

     

     

  2. Answer
    Didi
    Admin
    Didi avatar
    219 posts

    Posted 08 Jan Link to this post

    Hello Brian,

    Thank you for the provided images.

    Let me get straight to your questions:

    1) Full boarder around each field:

    In order to achieve this scenario you should implement a custom renderer for each platform. I have created a sample project that shows how the custom renderer is implemented on iOS. Basically inside the custom renderer you will need to set the following properties to the editor.Layer: CornderRadius, BorderColor, BorderWidth and ClipsToBounds. For more details please refer to the CustomDataFormRenderer.cs file - InitEditor method from the attached project.

    2) Editor Fields Left Alignment:

    The left alignment could be achieved through custom renderer. You will need to add the following code inside the overridden InitEditor method: 

    editor.Style.TextLabelDisplayMode = TKDataFormEditorTextLabelDisplayMode.Hidden;
     
    var textLabelDef = editor.GridLayout.DefinitionForView(editor.TextLabel);
    editor.GridLayout.SetWidth(0, textLabelDef.Column.Int32Value);
    editor.Style.EditorOffset = new UIOffset(15, 0);


    Please take a look at the attached project and let me know if you have any additional questions on this.

    Regards,
    Didi
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Brian
    Brian avatar
    12 posts
    Member since:
    Apr 2018

    Posted 08 Jan Link to this post

    Thank you very much!  You all are great the way you give us examples to review, love your product and company!

    Brian

Back to Top