FineUI 官方论坛

标题: 布局 VBox 下如何设置滚动条？ [打印本页]
作者: LiHN    时间: 2013-10-26 14:21
标题: 布局 VBox 下如何设置滚动条？
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fit.aspx.cs" Inherits="FineUI.Examples.layout.fit" %>

  3. <!DOCTYPE html>
  4. <html>
  5. <head id="Head1" runat="server">
  6.     <title></title>
  7.     <link href="../css/main.css" rel="stylesheet" type="text/css" />
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <x:PageManager ID="PageManager1" runat="server" AutoSizePanelID="Panel1" />
  12.     <x:Panel ID="Panel1" runat="server" ShowBorder="False" ShowHeader="false" BodyPadding="5px"
  13.         EnableBackgroundColor="true" Layout="VBox" BoxConfigAlign="Middle" BoxConfigChildMargin="0 0 10 0 "
  14.         BoxConfigPadding="5px" BoxConfigPosition="Start">
  15.         <Items>
  16.             <%--1--%>
  17.             <x:Panel ID="Panel2" Title="Panel2" runat="server" Height="270px" Width="750px" EnableBackgroundColor="true"
  18.                 ShowBorder="True" ShowHeader="True">
  19.             </x:Panel>
  20.             <%--2--%>
  21.             <x:Panel ID="Panel3" Title="Panel3" runat="server" Height="270px" Width="750px" EnableBackgroundColor="true"
  22.                 ShowBorder="True" ShowHeader="True">
  23.             </x:Panel>
  24.             <%--3--%>
  25.             <x:Panel ID="Panel4" Title="Panel4" runat="server" Height="270px" Width="750px" EnableBackgroundColor="true"
  26.                 ShowBorder="True" ShowHeader="True">
  27.             </x:Panel>
  28.             <%--4--%>
  29.             <x:Panel ID="Panel5" Title="Panel5" runat="server" Height="270px" Width="750px" EnableBackgroundColor="true"
  30.                 ShowBorder="True" ShowHeader="True">
  31.             </x:Panel>
  32.         </Items>
  33.     </x:Panel>
  34.     </form>
  35. </body>
  36. </html>
复制代码


请教大家，我需要四个居中的panel，但现在屏幕高度只能显示其中的三个... 在 Layout=VBox 的情况下如何设置滚动条啊？

[attach]3421[/attach]

作者: sanshi    时间: 2013-10-26 17:43
还是对布局理解不够深入，建议仔细学习：http://www.cnblogs.com/sanshi/archive/2012/09/18/2689978.html

以及示例：http://fineui.com/demo/#/layout/vbox.aspx

我更新后的代码为：
  1.     <form id="form1" runat="server">
  2.         <x:PageManager ID="PageManager1" runat="server" AutoSizePanelID="Panel1" />
  3.         <x:Panel ID="Panel1" runat="server" ShowBorder="False" ShowHeader="false" BodyPadding="5px"
  4.             EnableBackgroundColor="true" Layout="VBox" BoxConfigAlign="Middle" BoxConfigChildMargin="0 0 10 0 "
  5.             BoxConfigPadding="5px" BoxConfigPosition="Start">
  6.             <Items>
  7.                 <%--1--%>
  8.                 <x:Panel ID="Panel2" Title="Panel2" runat="server" Height="150px" Width="750px" EnableBackgroundColor="true"
  9.                     ShowBorder="True" ShowHeader="True">
  10.                 </x:Panel>
  11.                 <%--2--%>
  12.                 <x:Panel ID="Panel3" Title="Panel3" runat="server" BoxFlex="1" Width="750px" EnableBackgroundColor="true"
  13.                     ShowBorder="True" ShowHeader="True">
  14.                 </x:Panel>
  15.                 <%--3--%>
  16.                 <x:Panel ID="Panel4" Title="Panel4" runat="server" BoxFlex="1" Width="750px" EnableBackgroundColor="true"
  17.                     ShowBorder="True" ShowHeader="True">
  18.                 </x:Panel>
  19.                 <%--4--%>
  20.                 <x:Panel ID="Panel5" Title="Panel5" runat="server" BoxFlex="1" Width="750px" EnableBackgroundColor="true"
  21.                     ShowBorder="True" ShowHeader="True">
  22.                 </x:Panel>
  23.             </Items>
  24.         </x:Panel>
  25.     </form>
复制代码

效果图为：[attach]3422[/attach]


作者: 莮亾    时间: 2013-10-27 19:10
V4版 FINEUI？？？
作者: LiHN    时间: 2013-10-28 14:18
sanshi 发表于 2013-10-26 17:43
还是对布局理解不够深入，建议仔细学习：http://www.cnblogs.com/sanshi/archive/2012/09/18/2689978.html
...

谢谢楼主！
作者: LiHN    时间: 2013-10-28 14:36
sanshi 发表于 2013-10-26 17:43
还是对布局理解不够深入，建议仔细学习：http://www.cnblogs.com/sanshi/archive/2012/09/18/2689978.html
...

您好，如果我希望每个子Panel的高度固定，或者至少不小于 270px 呢?
作者: sanshi    时间: 2013-10-28 14:44
使用VBox布局时，外部容器固定宽度高度，内部容器自动调整大小。
作者: LiHN    时间: 2013-10-28 14:54
sanshi 发表于 2013-10-28 14:44
使用VBox布局时，外部容器固定宽度高度，内部容器自动调整大小。

所以说，不可能出现滚动条了...
作者: sanshi    时间: 2013-10-28 14:59
LiHN 发表于 2013-10-28 14:54
所以说，不可能出现滚动条了...

是的，子控件内可以有滚动条。但设置VBox的父控件不会有滚动条
作者: LiHN    时间: 2013-10-28 15:11
sanshi 发表于 2013-10-28 14:59
是的，子控件内可以有滚动条。但设置VBox的父控件不会有滚动条

嗯，我试着把最外部panel的布局改下吧，非常感谢！！！



欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4