Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin.Forms Label inside grid row has it's text cut off

Xamarin.Forms label that is positioned in a fixed size grid row has it's text cut off, or rather, it shows too much text and the lowest line gets shown only by half due to fixed height of the grid row. The grid row height has to stay fixed.

gridInner.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.8, GridUnitType.Star) });
gridInner.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(7.5, GridUnitType.Star) });
gridInner.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.7, GridUnitType.Star) });

var descLabel = new Label()
{
    HorizontalOptions = LayoutOptions.StartAndExpand,
    VerticalOptions = LayoutOptions.Fill,
    FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
    FontAttributes = FontAttributes.None,
    TextColor = Color.Black,
    LineBreakMode = LineBreakMode.WordWrap,
    VerticalTextAlignment = TextAlignment.Start
};
descLabel.SetBinding(Label.TextProperty, "Offer.Description");
gridInner.Children.Add(descLabel, 0, 1);

Text cut off on Android 5.1(Lollipop)

It seems to me that the label's height is larger than grid row's, or the text line height is calculated wrong. I've tried everything i could think of, for example:

<style name="App_TextViewStyle" parent="@android:style/Widget.TextView">
   <item name="android:baselineAligned">false</item>
   <item name="android:includeFontPadding">false</item>
   <item name="android:padding">1dp</item>
</style>

Could anyone more experienced in XF shed some light on me?

like image 256
Alen Zarkovic Avatar asked Jan 26 '17 10:01

Alen Zarkovic


2 Answers

Here are your options as I see it -

  1. Shrink the font size of the label
  2. Don't use a fixed sized grid row. Use either Auto or *
  3. Wrap your label in a ScrollView so that if it is cut off, the user can scroll within it to see the content.
like image 193
SuavePirate Avatar answered Oct 12 '22 23:10

SuavePirate


Keep "large text" in mind. 20% of all users change the default font size of the phone to be larger. You should test how that works. You might need to set a max text size for this. Otherwise the device will auto scale with the phone's settings.

like image 24
Janett Holst Avatar answered Oct 12 '22 23:10

Janett Holst