Clash Royale CLAN TAG#URR8PPP

Xamarin Forms Entry Field is scaling larger then screen size in iOS

I have a ContentPage which displays E-Mail adresses. The Page is opened, when it got pushed on the Navigation Stack.

ContentPage

var contextToBind = new WorkOrderEMailViewModel(tempBoundItem.No, tempBoundItem.Name, tempBoundItem.Description1);
var page = new WorkOrderEMailPage() BindingContext = contextToBind ;
await Navigation.PushAsync(page);


The Object WorkOrderEMailViewModel has a property called To, which stores the mail adresses.

WorkOrderEMailViewModel

To

The Xaml look like this. The Entry field stores the mail adress.

<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" >
<Entry Text="Binding BoundItem.To" HorizontalOptions="FillAndExpand"></Entry>
<Button Text="..." VerticalOptions="EndAndExpand" Command="Binding ListItemsButtonTappedCommand"></Button>
</StackLayout>


So here is where the problem starts. When the To has a very long value, the entry field scales greater then the screen is, so you could not see the end and the button next to the Entry field.

To

Entry

Following Screenshots will make it clear what i want. It is the first Entry.

Entry

This is how it looks like with short text and how it should look like with very long text.

And this is how it actually looks like.

I tried playing around with the HorizontalOption, but with no success.

HorizontalOption

Based on the recommendation from Clint Landry I changed the xaml to:

xaml

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Entry Text="Binding BoundItem.To" Grid.Row="0" Grid.Column="0"></Entry>
<Button Text="..." Command="Binding ListItemsButtonTappedCommand" Grid.Row="0" Grid.Column="1"></Button>
</Grid>


1 Answer
1

Wrap the page in a parent stacklayout with settings of VerticalOptions="FillAndExpand" HorizontalOptions="Fill". Change the children to either a grid (recommended) or HorizontalOptions="Fill" Orientation="Horizontal". The full xaml would be helpful as it feels like other parent xaml tags are affecting this.

<StackLayout x:Name="stackContent" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" >
<Entry Text="Binding BoundItem.To" HorizontalOptions="FillAndExpand"></Entry>
<Button Text="..." VerticalOptions="EndAndExpand" Command="Binding ListItemsButtonTappedCommand"></Button>
</StackLayout>
</Stacklayout>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.