0

Grid does not show the row when detail is open

asked 2021-12-03 15:41:05 +0800

softteam gravatar image softteam
130 8

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:

image description

image description

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:

image description

I would like that whatever the row we open the row keeps on the screen.

How can we achieve this?

Thank you,

Javier

delete flag offensive retag edit

4 Answers

Sort by ยป oldest newest most voted
0

answered 2021-12-07 17:21:50 +0800

hawk gravatar image hawk
2941 1 5
http://hawkphoenix.blogsp... ZK Team

I found the problem is the content in <detail> is too height to consume the whole page space.

There are 2 alternatives:

enable scroll

Limit the height of detail and enable scrolling:

    .z-detail-content{
        height: 30vh;
        overflow: auto;
    }

show detail in a popup

when clicking each item show a popup instead of a details.

link publish delete flag offensive edit
0

answered 2021-12-13 16:41:32 +0800

softteam gravatar image softteam
130 8

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:

image description

image description

Is it possible that whatever the row we open the row keeps on the screen?

Thank you,

Javier

link publish delete flag offensive edit
0

answered 2021-12-14 09:08:05 +0800

hawk gravatar image hawk
2941 1 5
http://hawkphoenix.blogsp... ZK Team

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.

link publish delete flag offensive edit
0

answered 2021-12-22 18:44:53 +0800

LuigiFabbri gravatar image LuigiFabbri
46 5

updated 2021-12-22 19:00:22 +0800

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);

}

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2021-12-03 15:41:05 +0800

Seen: 12 times

Last updated: Dec 22 '21

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More