0
votes

I have a problem. I created a register page, with labels that show an error like "Username already exists". But the space between the Label and the Entry is a little bit too much. Here is an image of how it is now: enter image description here

Now all of that is in a Grid, but the RowHeights are set to Auto, so this is the smallest size that the entry could get. The label, however, must be far more to the top (closer to the Username Entry).

Here is my code:

<Grid VerticalOptions="CenterAndExpand">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="35" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="90" />
        <ColumnDefinition Width="20" />
    </Grid.ColumnDefinitions>


    <Image Grid.Row="1" Grid.Column="0" x:Name="imgUsernameStatus" Margin="5"/>
    <Entry Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Placeholder="Username" PlaceholderColor="#bababa" FontSize="16" x:Name="txtUsername" TextColor="White" Unfocused="OnUsernameUnfocused" TextChanged="OnUsernameTextChanged" />
    <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="Username already exists" TextColor="Red" FontSize="11" x:Name="txtUsernameError" IsVisible="False" />

    <Image Grid.Row="3" Grid.Column="0" x:Name="imgEmailStatus" Margin="5"/>
    <Entry Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Placeholder="Email" PlaceholderColor="#bababa" FontSize="16" x:Name="txtEmail" TextColor="White" TextChanged="OnEmailTextChanged" />

</Grid>

How can I do that?

1
You have 2 row definitions with * height, this means they will fill the remaining available space. Your grid does not have a specific height value, meaning the more space available, the larger the row. You should consider setting a maximum height value for the cell. Although you will need to be careful because this value will likely need to be different across iOS & Andorid. - Axemasta
This is a snippet of my code, because it is a little bit big. This grid is inside another grid, so it has a static height! Sorry.... - Vreesie
Ah ok, have you made sure that the column & row spacing is set to 0? it defaults to something like 5 or 10 - Axemasta
Which platform are you developing on? I find visual studio windows is a bit nicer for doing xaml work because the previewer is better, showing things like the layout lines etc. Always helps with twiddly stuff such as this! - Axemasta
RowSpacing to 0 did the trick. I am developing on Android and deploy it to my phone. (OnePlus 6T) - Vreesie

1 Answers

1
votes

Default value for RowSpacing is 6 unit

Set RowSpacing="0"

<Grid VerticalOptions="CenterAndExpand"
      RowSpacing="0">

    <!--Your Content-->

</Grid>