CODEWITHSUNDEEP
c#xamlxamarinxamarin.formsxamarin.ios
Spire
Spire

Reputation: 1065

Stack layout wont fit elements when large text is On

I'm trying to make my app more compatible with accessibility features, and when a large text is enabled I cant fit two elements in a horizontally oriented stack. Any idea how I can fix this?

        StackLayout horisontalContainer = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };

        List<string> dataList = this.registerCountries();
        List<string> numberList = this.registerAreaCodes();
        List<string> pickerData = new List<string>();
        int i = 0;
        foreach (var data in dataList)
        {
            pickerData.Add(data + " +" + numberList[i]);
            i++;
        }

        countryCode = new Picker { Title = "Country code" };
        countryCode.ItemsSource = pickerData;
        countryCode.IsEnabled = true;
        countryCode.SelectedIndex = 0;
        countryCode.SelectedIndexChanged += (sender, args) =>
        {
            var tempValue = countryCode.Items[countryCode.SelectedIndex];
            string[] words = tempValue.Split('+');
            pickerSelection = words[words.Length-1];
        };

        phoneNbrEntry = new Entry
        {
            Placeholder = Localization.MobileNumber,
            FontSize = 18,
            BackgroundColor = Color.White.ToFormsColor(),
            TextColor = Color.Black.ToFormsColor(),
            Keyboard = Keyboard.Telephone,
        };

#if IOS phoneNbrEntry.WidthRequest = UIKit.UIScreen.MainScreen.Bounds.Width/2-20; #endif

#if ANDROID phoneNbrEntry.WidthRequest = CrossScreen.Current.Size.Width/2-20; #endif

        horisontalContainer.Children.Add(countryCode);
        horisontalContainer.Children.Add(phoneNbrEntry);

Images: Enlarged text Normal

Upvotes: 0

Views: 362

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

StackLayout will not fit the size with its child elements . In your case it would be better to use Grid instead of Stacklayout so that we could set the width of the Picker and Label as a relative value .

    Grid grid = new Grid
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.CenterAndExpand,

            Padding = new Thickness(10,0),

            RowDefinitions =
            {
              
              new RowDefinition { Height = new GridLength(60) },
               
            },

            ColumnDefinitions =
            {

              // the width of picker and label will fill half of the screen
              new ColumnDefinition{Width = new GridLength(1, GridUnitType.Star) },
              new ColumnDefinition{Width = new GridLength(1, GridUnitType.Star) },
            }
        };

        var countryCode = new Picker { Title = "Country code" };
        //countryCode.ItemsSource = pickerData;
        countryCode.IsEnabled = true;
        countryCode.TitleColor = Color.Red;
        countryCode.SelectedIndex = 0;

        var phoneNbrEntry = new Entry
        {
            Placeholder = "11111111",
            FontSize = 38,
            BackgroundColor = Color.White,
            TextColor = Color.Black,
            Keyboard = Keyboard.Telephone,
        };

        grid.Children.Add(countryCode,0,0);
        grid.Children.Add(phoneNbrEntry,1, 0);


        
        Content = grid;

    }

Effect

Upvotes: 1

Related Questions