AnimationContainer postion

0 Answers 141 Views
AnimationContainer
Guillermo
Top achievements
Rank 1
Guillermo asked on 08 Mar 2023, 10:38 AM

I have an animation container for two fields inside the form. One component is a textbox, but the other components is a grid.

The problem is that grid show up other forms of component. This is for the position of css. 

 

<TelerikAnimationContainer @ref="@tacHeaderJson" AnimationType="@AnimationType.PushRight" style="position: static !important;">
                            <TelerikTextBox @bind-Value="@DataMapHeaders.Value"
                                            Enabled=@Enabled
                                            Id="request-header">
                            </TelerikTextBox>
                        </TelerikAnimationContainer>                        
                        <TelerikAnimationContainer @ref="@tacHeaderTable" AnimationType="@AnimationType.PushLeft" style="position: static !important;">
                                <TelerikGrid Data=@HeadersTable
                                             Width="100%"
                                             EditMode="@GridEditMode.Inline"
                                             @ref="@GridRef">
                                    <GridToolBarTemplate>
                                        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus" Enabled="@Enabled">@Localizer!["Add"]</GridCommandButton>
                                    </GridToolBarTemplate>
                                    <GridColumns>
                                        <GridColumn Field="@nameof(HeaderParameter.Parameter)" Title="@Localizer!["Key"]"></GridColumn>
                                        <GridColumn Field="@nameof(HeaderParameter.Value)" Title="@Localizer!["Value"]"></GridColumn>
                                        <GridCommandColumn>
                                            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil" ThemeColor="@(ThemeConstants.Button.ThemeColor.Info)" Enabled="Enabled"></GridCommandButton>
                                            <GridCommandButton Command="Cancel" Icon="@SvgIcon.X" ThemeColor="@(ThemeConstants.Button.ThemeColor.Error)" OnClick="@DeleteHandler" Enabled="Enabled"></GridCommandButton>
                                            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@UpdateHandler" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" Enabled="Enabled"></GridCommandButton>
                                        </GridCommandColumn>
                                    </GridColumns>
                                </TelerikGrid>
                        </TelerikAnimationContainer>

I try this, 

.k-animation-container {
    position: static !important;
    overflow: hidden;
    z-index: 100;
}

But the style overide all style of current page. I have some dropdowns and the show the options in the bottom of the page.

 

Any solution?

 

Best regards

No answers yet. Maybe you can help?

Tags
AnimationContainer
Asked by
Guillermo
Top achievements
Rank 1
Share this question
or