MaterialDesignInXamlToolkit icon indicating copy to clipboard operation
MaterialDesignInXamlToolkit copied to clipboard

Floating hint of TextBox is cut off

Open reiseder opened this issue 3 years ago • 2 comments

The floating hint of a TextBox is cut off even if it looks like there is enough space available. The hint doesn't go to the end of the TextBox either as demonstrated with the third TextBox in my example.

I'm using version 4.5.0 of MaterialDesignThemes.

Repository with example code.

image

<Window x:Class="MaterialDesignFloatingHintBug.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">
    <Grid>
        <StackPanel>
            <materialDesign:Card Padding="32"
                                 Margin="16">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150" />
                    </Grid.ColumnDefinitions>

                    <TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Margin="5"
                             materialDesign:HintAssist.Hint="Short hint">Test Test</TextBox>
                    
                    <TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Grid.Row="1"
                             Margin="5"
                             materialDesign:HintAssist.Hint="A longer hint that should fit">Test Test</TextBox>
                    
                    <TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Grid.Row="2"
                             Margin="5"
                             materialDesign:HintAssist.Hint="A very very very long hint, so long it should not fit anymore">Test Test</TextBox>
                </Grid>
            </materialDesign:Card>
        </StackPanel>
    </Grid>
</Window>

reiseder avatar May 11 '22 11:05 reiseder

Yes, I've noticed that too. It's been around for a while.

ElieTaillard avatar May 11 '22 14:05 ElieTaillard

What I think is happening: When the hint is in resting position (not floating and inside the TextBox as placeholder), the SmartHint control is cut off. Then, when the TextBox control is focused, the SmartHint gets floated above the user input. At this moment some animations are happening, which change the scale and opacity of the SmartHint.

I got lost inside the animation code but my guess is one of following is the issue:

  • The width of the SmartHint gets scaled
  • There is no TextWrapping with overflow
  • The ContentControl inside SmartHint does not detect more space after floating

MichelMichels avatar Jun 29 '22 07:06 MichelMichels