[Solved] Vertical align skeleton at top

[Joel]

How do I align the left pane to the top instead of it being centered vertically?  The CSS provided by AI does not seem to override it.

<TelerikSplitter Orientation="SplitterOrientation.Horizontal">
    <SplitterPanes>
        <SplitterPane Size="40%" Min="30%" Max="70%"
                      Collapsible="false"
                      Scrollable="true"
                      Class="gsi-align-top-pane">
            <TelerikSkeleton Height="600px" Width="100%" />
        </SplitterPane>
        <SplitterPane Collapsible="false" Min="30%" Max="70%" Scrollable="true">
            <TelerikGridLayout Class="grid-layout">
                <GridLayoutRows>
                    <GridLayoutRow />
                    <GridLayoutRow />
                    <GridLayoutRow />
                </GridLayoutRows>
                <GridLayoutItems>
                    <GridLayoutItem Row="1">
                        <TelerikSkeleton Height="75px"
                                         Class="k-display-inline-block" />
                    </GridLayoutItem>
                    <GridLayoutItem Row="2">
                        <table class="k-grid">
                            @for (int i = 0; i < 10; i++)
                            {
                                <tr class=skeleton-table-row>
                                    <td class="skeleton-table-col">
                                        <TelerikSkeleton Width="100%"></TelerikSkeleton>
                                    </td>
                                    <td class="skeleton-table-col">
                                        <TelerikSkeleton Width="100%"></TelerikSkeleton>
                                    </td>
                                    <td class="skeleton-table-col">
                                        <TelerikSkeleton Width="100%"></TelerikSkeleton>
                                    </td>
                                    <td class="skeleton-table-col">
                                        <TelerikSkeleton Width="100%"></TelerikSkeleton>
                                    </td>
                                </tr>
                            }
                        </table>
                    </GridLayoutItem>
                    <GridLayoutItem Row="3">
                        <TelerikSkeleton Height="75px"
                                         Class="k-display-inline-block" />
                    </GridLayoutItem>
                </GridLayoutItems>
            </TelerikGridLayout>
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

 

.gsi-align-top-pane {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
}

    .gsi-align-top-pane > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: flex-start !important;
    }

    .gsi-align-top-pane .k-skeleton {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: flex-start !important;
        /* Remove any auto margin that may be set by Telerik */
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        margin-block: 0 !important;
        margin: 0 !important;
    }

[Dimo]

Hello Joel,

Please use a Rectangle Skeleton Shape instead of the default Text.

<TelerikSkeleton Height="600px" Width="100%" ShapeType="@SkeletonShapeType.Rectangle" />

This will also increase the effective Skeleton height, so you may need to reduce it.

The Text Shape applies a scale transform style, which appears to move the component down, although this is not exactly what is happening.

Regards,
Dimo
Progress Telerik