dwz:改造页面查询内容的布局

前言:dwz的页面查询条件部分如果使用标签ul、li进行布局的话,在页面分辨率较小时,或者窗口缩小时,就会隐藏部分查询条件,为了防止这种情况出现,就需要改造成table来实现,但是可能不会轻而易举的完成,那么就随我来看看吧。

先来看看问题出现的原因: 部分代码

<ul class=”searchContent”>==”${vo.mo.vscode}” <c:if test=”${vo.mo.codeflag == 1}”>readonly</c:if>/></li>

bug再现

窗口足够大的时候,正常。

缩小窗口宽度后,一部分查询条件不见了。

使用firebug看的话,会发现

注意红色标出的部分被隐藏在上一层内容下面,导致“肉眼”无法看到了,哈哈。

改造的部分代码如下

<table class=”searchContent”>>商品代码:==”${vo.mo.vscode}” <c:if test=”${vo.mo.codeflag == 1}”>readonly</c:if>/></td>

看页面效果:

宽度足够大的时候,没有问题,继续缩小测试

出现了滚动条,基本上保证了条件显示,但是,条件的部分导语不见了。

商品名称的查询条件被隐藏了。

为什么这样子呢?因为有标签label在缩小的时候被挤占了,那么去掉label标签看看如何。

代码改造:

<table class=”searchContent”><tr><td>会员编号:=><td>交易类型:=”vtype”>

先来看看窗口缩小后的效果:

出现了滚动条,页面查询条件内容都存在了。但是如果查询条件是单行的时候,我们来看看效果图:

红色标出的,有下拉框的部分,成了上下对齐格式,这不符合我们的要求!我们要水平对齐。

改造的部分代码:

<td>=”combox” name=”vtype”>

效果图

再次恢复到双行,我们来看一下效果:

发现红色标出的内容上下没有对齐,为了追求完美,我们继续改造,在商品名称上也加上label标签。

部分代码:

<td>==”${vo.mo.vsname}” <c:if test=”${vo.mo.codeflag == 1}”>readonly</c:if>/>>交易类型:====></td>

再来看效果:

再缩小一些:

发现红色标出的内容又不见了, 我暂时没有想到好的办法解决掉这个麻烦,小伙伴可有方法,,请告知。

总结:一个小小的布局,都需要不断的调试才能做到最优。对于这个问题解决的办法就是:

用开怀的笑容去迎接每一个黎明,

dwz:改造页面查询内容的布局

相关文章:

你感兴趣的文章:

标签云: