Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I created an example with the structure of our application:
https://zkfiddle.org/sample/11blnm1/50-Grid-STS
I realised that if I open one of the first rows everything works fine and we keep the grid row in the same position either detail is open or not:
But, if I open one of the last rows, we go to the final part of the detail and we do not see the grid row:
I would like that whatever the row we open the row keeps on the screen.
How can we achieve this?
Thank you,
Javier
I found the problem is the content in <detail> is too height to consume the whole page space.
There are 2 alternatives:
Limit the height of detail and enable scrolling:
.z-detail-content{
height: 30vh;
overflow: auto;
}
when clicking each item show a popup instead of a details.
Hi Hawk:
In our real application we cannot show detail in a popup.
I tried the enable scroll option but it is not what we need: we would waste a lot of space because detail height is variable:
Is it possible that whatever the row we open the row keeps on the screen?
Thank you,
Javier
If the detail's content is various, you just can use max-height:
.z-detail-content{
max-height: 30vh;
overflow: auto;
}
Then when the detail's content is less, it consumes a smaller height.
To make a component in the visible area`, this method http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/util/Clients.html#scrollIntoView(org.zkoss.zk.ui.Component) will help
But I think if you keep a detail's height small enough, the row should not be pushed out of the viewport by a detail.
Hi Softteam,
I solved in this way:
public void initDetail() {
Clients.evalJavaScript("var gridEle=document.getElementById('"
+ this.getGrid().getUuid()
+ "-body"
+ "'); gridEle.style.height=\"\";
gridEle.style.overflow=\"auto\"");
}
@Command
public void showDetail(@BindingParam("cmp") Detail cmp,@BindingParam("url") String url)
{
this.grid.initDetail();
Include In = new Include();
In.setSrc(url);
In.setDynamicProperty("prop1",......);
In.setDynamicProperty("prop2",......);
cmp.appendChild(In);
}
Asked: 2021-12-03 15:41:05 +0800
Seen: 15 times
Last updated: Dec 22 '21