Telerik TopPane高度自动

本文关键字:高度 TopPane Telerik | 更新日期: 2023-09-27 18:19:44

问题:我无法在Telerik TopPane中将高度设置为自动。我最终得到了一个默认的高度值230px。

代码:

<div id="ParentDivElement" style="height: 100%;">
      <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
            Orientation="Horizontal" Skin="Outlook" BorderSize="0">
            <telerik:RadPane ID="TopPane" runat="server" Height="auto" MinHeight="0" MaxHeight="0"
                Scrolling="none" BorderStyle="None" EnableAjaxSkinRendering="False" 
                EnableTheming="False">
                <!-- Place the content of the pane here -->
                <div id="tcp_main">
                    <div id="tcp_logo">
                        <image src="images/test/logo.png" alt="logo" />
                    </div>
                    <div id="tcp_text">
                        <h1> Hello world </h1>
                    </div>
                </div>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" EnableResize="False" />
            <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
                <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true">
                    <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                        <!-- Place the content of the pane here -->
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="ContentPane" runat="server">
                        <!-- Place the content of the pane here -->
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
</div>

条件:如果我将高度属性设置为自动,我会得到以下错误:

Property value is not valid.

如果我点击详细信息,我会得到:

'auto' cannot be parsed as a unit as there are no numeric values in it. Examples of valid unit strings are '1px' and '.5in'.

问题:看起来Telerik控件中不接受auto的高度,我该怎么办才能最终使用auto或其等效功能?

注意:我不想使用!在css中很重要。

Telerik TopPane高度自动

将高度属性设置为从WebControl继承的RadPane样式属性。在样式中,样式属性的呈现方式与添加到样式集合OnPreRender中的单个属性相同。

<telerik:RadPane ID="TopPane" runat="server" 
            Scrolling="none" BorderStyle="None" EnableAjaxSkinRendering="False"  
            EnableTheming="False" Style="height: auto; min-height: 0px;">

我知道您提到不想将任何内容设置为!在CSS中很重要,但为了试验,你尝试过以下方法吗?

CSS:

<style type="text/css">  
    .AutoHeight  
    {  
        height: auto !important;  
    }  
</style>  

标记:

<telerik:RadPane ID="TopPane" runat="server" ... CssClass="AutoHeight" ...>

这将强制高度为自动。如果这样做有效,那么您可以继续使用更新的高度属性修改您正在使用的Telerik Skin(Outlook)。你不应该设置!如果你在皮肤中更新这一点,这一点很重要。

不过,这里需要注意的是,RadSplitter控件依赖于RadPane来设置特定的大小(因此是最小/最大高度/宽度等),您可能希望只将一个常规的<div>元素作为"顶部面板",然后只在下半部分使用RadSplitter。