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