FineUI 官方论坛
标题:
图片如何在VBOX布局下居中显示
[打印本页]
作者:
Gnid
时间:
2015-1-10 20:37
标题:
图片如何在VBOX布局下居中显示
想在点击BUTTON弹出的WINDOW窗口中居中显示一个图片,水平方向和垂直方向都要居中。
<f:Panel ID="Panel1" runat="server" ShowBorder="false" ShowHeader="false" BoxFlex="1" Layout="VBox" BoxConfigAlign="Center" BoxConfigPosition="Center">
<Items>
<f:Image ID="imgPreview" runat="server" ImageUrl="~/111.jpg"></f:Image>
</Items>
</f:Panel>
复制代码
项目运行后,第一次点击BUTTON弹出窗口,图片明显不是水平和垂直居中,如下图:
[attach]7069[/attach]
这时如果关闭WINDOW,然后再点击BUTTON打开窗口,显示就正常了,如下图:
[attach]7071[/attach]
经测试,FF、CHROME、IE都存在这样的问题,不知道是BUG,还是我的代码有问题。
作者:
sanshi
时间:
2015-1-28 12:05
这个不是BUG。
原因是在进行布局的时候,图片还没有加载完毕,因此尚不知道图片的大小。有两种解决办法:
1. 明确图片的大小,类似如下代码:
<f:Image ID="imgPreview" runat="server" Width="150" Height="204" ImageUrl="~/test/111.jpg"></f:Image>
复制代码
2. 延迟重新布局:
</form>
<script>
var panel1ClientID = '<%= Panel1.ClientID %>';
F.ready(function () {
window.setTimeout(function () {
F(panel1ClientID).doLayout();
}, 100);
});
</script>
</body>
</html>
复制代码
作者:
Gnid
时间:
2015-1-31 09:08
非常感谢三石兄。
欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/)
Powered by Discuz! X3.4