Label Position

[David Ocasio]

Want to have the label appear side by side with the input box not above it.

I see in the android native version a labelposition property but no property shows in xamarin forms.

What is the best approach for this using forms.

We will not be switching to the native controls but I do suspect we will never go past android for this internal application, so a solution that makes ios harder would be acceptable.

[Yana]

Hi David,

Our Xamarin.Forms DataForm control wraps native Android and iOS DataForm implementations, that's why there may be some differences across platforms - for example, by default, the labels and inputs are placed differently on both devices.

You can access and modify the native controls on Android and iOS through custom renderers.  So, in the concrete case, you would need to create a custom renderer on Android, override OnElementChanged event where you can access the native DataForm control and set its LabelPosition property:

public class CustomDataFormRenderer : DataFormRenderer
{
    public CustomDataFormRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<RadDataForm> e)
    {
        base.OnElementChanged(e);

        if (this.Control != null)
        {
            this.Control.LabelPosition = Com.Telerik.Widget.Dataform.Engine.LabelPosition.Left;
        }
    }
}

You would also need to register the renderer with ExportRenderer method:

[assembly: ExportRenderer(typeof(RadDataForm), typeof(CustomDataFormRenderer))]

I've also attached a simple runnable app to show you exactly how this would work.  CustomDataFormRenderer  is placed inside the Android project.

I hope I was of help.

Regards,
Yana
Progress Telerik

[David Ocasio]

Yana that worked great. Thankyou.

As a follow up question ... how can I specify the width of the labels or possibly reduce width of input boxes . a number of my multi word labels are being wrapped and I would like to increase the width so that does not happen.

[Yana]

Hi David,

You would need to modify the EditorsMainLayout of the Android DataForm in the renderer, please check here for more details on how custom layouts work: DataForm for Xamarin.Android: Custom Layouts.

I've updated the sample app from my previous reply to demonstrate the approach. Please go to the Android project inside Resources-> layout to check the custom layout - the only difference from the default one is the explicitly set width to the data_form_header_container element.

Let me know if I can help with anything else.

[David Ocasio]

Yana,  that also worked great. Thanks.

Of course i have one more question but this is more of a bug i think. Let me know if i should open a new thread or put a ticket in.

If i touch in an edit box the keyboard comes up of course, but also all the input labels move up at least 4-8px . I dont understand why . I have attached a some snap shots of the behavior.

to repeat the only think i do is touch the input area and the labels move up.

Strange.

Any help will be appreciated . it is not earth shattering just an annoying behavior.

[Yana]

Hi David,

I didn't manage to reproduce this issue in the sample app. It could be related to the layout or anything else I am missing in the DataForm definition. Would it be possible to try to isolate it in a simpler app and send it over, so I can reproduce and research it on my side? Please open a support ticket and send the zipped app there.