Xamarin.Forms icon indicating copy to clipboard operation
Xamarin.Forms copied to clipboard

[Visual] Height on Entry causes cropping and overlap

Open davidortinau opened this issue 6 years ago • 7 comments

Description

I set the height on Entry and Editor, and the result is overlapping and content of the entry being cropped.

Steps to Reproduce

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             x:Class="VisualChallenge.VisualChallengePage"
             Shell.NavBarIsVisible="true"
             Title="Edit Request"
Visual="Material
             >
    
    <Shell.BackButtonBehavior>
        <BackButtonBehavior TextOverride="Cancel"></BackButtonBehavior>
    </Shell.BackButtonBehavior>
    
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
                .EntryLabel {
                    color: #999999;
                    font-size: 10;
                    font-family: Raleway Bold;
                }
            
                ^Entry, ^Editor {
                    color: #999999;
                    font-size: 18;
                    font-family: Raleway Regular;
                    background-color: transparent;
                    height: 24;
                }
                
                ^Picker {
                    color: #999999;
                    font-size: 18;
                    font-family: Raleway Regular;
                }
                
                .actionButton {
                    background-color: #f05123;
                    color: white;
                    font-family: Raleway Bold;
                }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Save"/>
    </ContentPage.ToolbarItems>
    
    <ScrollView>
        <StackLayout Margin="21,30">

            <Label Text="REQUEST TITLE" class="EntryLabel" />
            <Entry Placeholder="Title" />
            
            <Label Text="PRIORITY" class="EntryLabel" />
            <Picker />
            
            <Label class="EntryLabel">
                <Label.FormattedText>
                    <FormattedString>
                        <Span>DETAILS</Span> <Span FontFamily="Raleway Regular" FontSize="10">(OPTIONAL)</Span>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Editor Placeholder="Clean bed, plant, shrubs, trim trees" />
            
            <Label Text="PHOTOS &amp; VIDEOS" class="EntryLabel" />
            
            <Button BorderColor="#999999" 
                    CornerRadius="0" 
                    BorderWidth="1" 
                    BackgroundColor="White"
                    TextColor="Black"
                    ContentLayout="Top, 8"
                    Image="icon_camera" 
                    Text="ADD PHOTO OR VIDEO" 
                    FontFamily="Raleway Bold" 
                    HorizontalOptions="Fill" Padding="40" />

            <Button class="actionButton" Text="CANCEL REQUEST" HeightRequest="46" />

        </StackLayout>
    </ScrollView>
    
</ContentPage>

Expected Behavior

The Entry and Editor control resize to my height and do not crop unless I choose a radically inappropriate size.

Basic Information

  • Version with issue: 4.0.1 nightly

Screenshots

Before: screenshot 2019-02-11 20 48 39

After: screenshot 2019-02-11 21 02 36

davidortinau avatar Feb 12 '19 03:02 davidortinau

I think version 3.6 is having this issue too. I just found out in a project of mine.

codercampos avatar Apr 08 '19 00:04 codercampos

Also in Android and also with version 4.2

mcorazza-stesi avatar Aug 23 '19 08:08 mcorazza-stesi

Any updates here? being forced to use such large input boxes is a little annoying.

Shaggy13spe avatar Sep 29 '19 14:09 Shaggy13spe

Same here with latest version 4.2.0.848062

kelvincwk avatar Oct 16 '19 07:10 kelvincwk

With no resolution in sight, has anyone found a way around this other than walking away from Material's Entry altogether?

ibreslauer avatar Mar 30 '20 15:03 ibreslauer

We have this problem too with Material entries. Placeholder text clips the text. We can work around it by using a height request it seems but that is not very useful when FontSizes can vary. Using XF 4.6.0.800 on Android.

aharwood2 avatar Jun 30 '20 16:06 aharwood2

@aharwood2 I would suggest adapt the control in any fontSizes (maybe some kind of formula between HeightRequest and FontSize value). This can be a problem on the library implementation or either coming from the native library itself.

codercampos avatar Jul 01 '20 14:07 codercampos