FineUI 官方论坛

标题: 图片如何在VBOX布局下居中显示 [打印本页]
作者: Gnid    时间: 2015-1-10 20:37
标题: 图片如何在VBOX布局下居中显示
想在点击BUTTON弹出的WINDOW窗口中居中显示一个图片，水平方向和垂直方向都要居中。
  1. <f:Panel ID="Panel1" runat="server" ShowBorder="false" ShowHeader="false" BoxFlex="1" Layout="VBox" BoxConfigAlign="Center" BoxConfigPosition="Center">
  2.             <Items>
  3.                 <f:Image ID="imgPreview" runat="server" ImageUrl="~/111.jpg"></f:Image>
  4.             </Items>
  5.         </f:Panel>
复制代码

项目运行后，第一次点击BUTTON弹出窗口，图片明显不是水平和垂直居中，如下图：
[attach]7069[/attach]


这时如果关闭WINDOW，然后再点击BUTTON打开窗口，显示就正常了，如下图：
[attach]7071[/attach]


经测试，FF、CHROME、IE都存在这样的问题，不知道是BUG，还是我的代码有问题。
作者: sanshi    时间: 2015-1-28 12:05
这个不是BUG。

原因是在进行布局的时候，图片还没有加载完毕，因此尚不知道图片的大小。有两种解决办法：

1. 明确图片的大小，类似如下代码：
  1. <f:Image ID="imgPreview" runat="server" Width="150" Height="204" ImageUrl="~/test/111.jpg"></f:Image>
复制代码

2. 延迟重新布局：
  1.     </form>
  2.     <script>
  3.         var panel1ClientID = '<%= Panel1.ClientID %>';
  4.         F.ready(function () {

  6.             window.setTimeout(function () {
  7.                 F(panel1ClientID).doLayout();
  8.             }, 100);
  9.             
  10.         });

  12.     </script>
  13. </body>
  14. </html>
复制代码



作者: Gnid    时间: 2015-1-31 09:08
非常感谢三石兄。



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