Unplanned
Last Updated: 21 Jun 2022 13:52 by ADMIN
Tom
Created on: 20 Jun 2022 18:00
Category: Button
Type: Bug Report
0
Button: [Android] [iOS] CornerRadius is not applied when setting BorderThickness
Good day,

I noticed that the corner radius does not effect the button border.   Is there a work around to have rounded button border for iOS.  I've attached the code used to define the one button on the screen.


        <Grid BackgroundColor="{StaticResource LightGrey}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <controls:FaSearchBar Grid.Row="0" Margin="20"
                                  x:Name="searchBar" TextColor="{StaticResource Black}" Text="{Binding SearchText}"
                                  Placeholder="{Binding Localize[TextSearchFulfillment]}" PlaceholderColor="{StaticResource DarkGrey}"
                                  BackgroundColor="{StaticResource LightGrey}">
            </controls:FaSearchBar>
            <Grid Grid.Row="1" BackgroundColor="{StaticResource White}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="21 Pending Orders" Style="{StaticResource SecondaryTextLabel}" 
                       VerticalOptions="Center" Margin="20,0,20,0"/>
                <Label Grid.Column="1" Text="Last synced on: June 3, 09:41 AM"
                       Style="{StaticResource  SummaryTextLabel}"
                       TextColor="{StaticResource DarkGrey}"
                       HorizontalOptions="EndAndExpand"  />
                <telerikInput:RadButton Grid.Column="2" Text="Sync Now" TextColor="{StaticResource DarkGrey}" 
                                        HorizontalOptions="EndAndExpand" Margin="20,10,20,10" 
                                        BorderThickness="2"
                                        CornerRadius="10"
                                        BorderColor="{StaticResource LightGrey}">
                    <telerikInput:RadButton.ImageSource>
                        <FontImageSource Size="Small" FontFamily="{DynamicResource FontAwesome5ProRegular}"
                                         Glyph="{x:Static xaml:Icons.Rotate}" Color="{StaticResource DarkGrey}" />
                    </telerikInput:RadButton.ImageSource>
                </telerikInput:RadButton>
            </Grid>
        </Grid>

1 comment
ADMIN
Didi
Posted on: 21 Jun 2022 13:52

Hello Tom,

I have reproduced the issue. I changed the status to this item to "Unplanned". It seems the CornerRadius is not applied on Android and iOS when BorderThickness is set .

Workaround:

Use BorderWidth instead of BorderThickness.

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.