2012-01-09 68 views
0

问题:我无法在Telerik TopPane中将高度设置为自动。我最终的默认高度值为230像素。Telerik TopPane高度自动?

代码:

<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> 

条件:如果我height属性设置为auto,我得到以下错误:

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控件中的高度不被接受,什么做我必须做的最终与汽车或它的等效功能?

注意:我不想在CSS中使用!important。

回答

1

将height属性设置为从WebControl.Style继承的RadPane样式属性,样式属性与添加到样式集合OnPreRender中的各个属性呈现相同。

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

这不起作用。设置高度时,使用javascript更改窗口大小时高度会调整。但高度不是用css auto设置的,所以功能不同。我想在CSS中具有与“auto”相同的功能。 – NomenNescio 2012-01-09 10:53:53

+0

除非您实现自定义JavaScript,否则无法实现SplitterPane自动移动的效果。我建议的确如你设置overflow属性滚动一样,你会看到div展开。 – Lloyd 2012-01-09 10:59:18

+0

我不在乎自动移动分隔栏。我想将宽度设置为“width:auto;” – NomenNescio 2012-01-09 11:30:50

1

我知道你提到不想设定什么作为!在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。