RadButton: HorizontalContentAlignment = Start on iOS without padding

[Daniel]

When setting HorizontalContentAlignment to Start, the RadButton looks alright on UWP and Android. The title is left aligned with decent spacing to the border. However, on iOS there is no padding to the left. Is it possible to have a spacing here? 

[Pavel R. Pavlov]

Hello Daniel,

Yes. You can control the spacing using the Padding property of the button. You can set it per your needs for iOS only. The reason behind this behavior is the fact that in iOS when you set the content to be left aligned, the content (the Text of the button) actually goes to the most left of its container (the RadButton). To compensate for this behavior, you can set left padding of 8. 

Please give this a try and let us know if it works for you.

Regards,
Pavel R. Pavlov
Progress Telerik

[Daniel]

Hi Pavel,

unfortunately, using Padding is not working for me. The title has no spacing to the left.

I am using iOS 11 Simulator and Telerik Xamarin Forms 2018.1.117.5.

Best regards,

Daniel

[Pavel R. Pavlov]

Hi Daniel,

Thank you for providing additional information regarding this behavior. We confirm that the Padding is not working as expected in iOS. This is why we logged a bug in our feedback portal. Providing a fix is scheduled for our 2018 R2 official release. We aim to release at the beginning of May. Is this timeframe good enough for you? If not we could provide a workaround to be used till our official release is available.

Regards,
Pavel R. Pavlov
Progress Telerik

[Daniel]

> We aim to release at the beginning of May. Is this timeframe good enough for you?

Yes, that should be alright. Looking forward to the 2018 R2 release :-)

[Stavros]

I experienced the same bug iOS 12.0 with 3.2 Xamarin and Telerik

Padding isn't working as expected in iOS simulator.

[Didi]

Hi Stavros,

I have tried to reproduce the described behavior but on my side it works fine. Could you please elaborate more on issue you have observed and how the padding of the Button is not working? Please take a look at the attached project and may I ask you to modify it according to your specific setup and send it back to me? In order to attach a project you should open a support ticket because in the forum only image attachments are allowed. 

Alternatively, if you could provide some code snippet or an image demonstrating the issue, that would be of help as well.

Looking forward to your reply.

Regards,
Didi
Progress Telerik

[Stavros]

Sorry, I didn't write it properly. I have an issue with iOS and the Padding. Not with the  

The padding seems not working at all. 

[Didi]

Hi Stavros,

Thank you for the attached screenshot.

I have noticed form the attached image that the button does not have padding left and right. Please take a look at the following snippet below how the RadButton is defined:

<StackLayout>
        <telerikInput:RadButton x:Name="button"
                        HorizontalContentAlignment="Start"
                        Text="Click me!"
                        BorderThickness="2"
                        BorderColor="#4488F6"
                        Clicked="button_Clicked"/>
</StackLayout>

When HorizontalTextAlignment is applied to Start, the Button has left padding. Could you please send me how the RadButton is defined in your specific setup? In this way I could investigate it further.

Looking forward to your reply.

Regards,
Didi
Progress Telerik

[Stavros]

<telerik:RadButton x:Name="btnPrev1"
                              Text="Previous"
                              Clicked="Previous_Clicked" 
                              HorizontalContentAlignment="Center" 
                              Padding="10,0" />

[Didi]

Hi Stavros,

Thank you for the provided code.

I have tested it and I reproduced the issue when the parent element is horizontal oriented and the RadButton padding is horizontal oriented the button padding is not applied on iOS. I have logged this in our Feedback portal and you could follow the item on the provided link: Button: [iOS] Padding does not respect horizontal options. Currently, the workaround I could suggest is using RadBorder control with padding and the border should be wrapped around a Button. Here is an example how this could be achieved:

<StackLayout>
        <telerikPrimitives:RadBorder BorderColor="#4488F6"
                            HeightRequest="100"
                            WidthRequest="100"
                            HorizontalOptions="Center"
                            CornerRadius="5"
                            Padding="10,0"
                            BackgroundColor="AliceBlue">
            <telerikInput:RadButton Text="Hello there" TextColor="Black" BackgroundColor="Coral"/>
        </telerikPrimitives:RadBorder>
</StackLayout>

You can also find your Telerik points updated for this report.

Let me know if you have any other questions. 

Regards,
Didi
Progress Telerik