0

Responsive borderlayout maxsize

asked 2022-03-23 00:05:28 +0800

AndreiArdei gravatar image AndreiArdei
101 2

Hi. I'm trying to make use of the borderlayout's attribute maxsize in order to limit the width of the panel. This works fine if I already know the size or pixel count of the screen / desktop. However I would like to set it to a percentage.

For example I have a borderlayout with a West, Center and East. Initially I do the following command to set the East size .setSize("30%"); and .setMaxsize(400); However the maxsize method only allows for integer values, therefor if I close the West panel, the East does not grow it's maxsize.

The usecase is the following. West is a navigation panel, Center has a bunch of fields and the East displays a pdf viewer. When I close the WEST, I intend to enlarge the East but so much so that it does not overlap the center.

Question is, is there a way in which i could dynamically update the maxsize property of the East? I was thinking of having the east maxsize as 60% of view

delete flag offensive retag edit

2 Answers

Sort by » oldest newest most voted
1

answered 2022-03-24 12:55:34 +0800

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

I see, then css is better than maxsize.

<borderlayout>
    <west size="200px" collapsible="true" closable="true"  slidable="false" title="west" border="normal" onOpen='east.setSclass("largeWidth")'>
        west
    </west>
    <center>
        center
    </center>
    <east id="east" size="10%" splittable="true" sclass="smallWidth" >
        east
    </east>
</borderlayout>
<style>
    .smallWidth{
        max-width: 15%;
    }
    .largeWidth{
        max-width: 25%;
    }
</style>

I also create a feature request, since maxsize can limit the dragging position of a splitter. https://tracker.zkoss.org/browse/ZK-5131

link publish delete flag offensive edit

Comments

Alright. Thanks a lot! Will be looking forward to this feature :D

AndreiArdei ( 2022-03-24 15:41:31 +0800 )edit
0

answered 2022-03-23 18:02:33 +0800

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

updated 2022-03-23 18:03:42 +0800

Just give you a clue:

<borderlayout>
    <west size="200px" collapsible="true" closable="true"  slidable="false" title="west" border="normal" onOpen="east.setMaxsize(800)">
        west
    </west>
    <center>
        center
    </center>
    <east id="east" size="20%" maxsize="400" splittable="true">
        east
    </east>
</borderlayout>

You need to check OpenEvent.isOpen()==true then change the maxsize. If this doesn't work, please post related code.

link publish delete flag offensive edit

Comments

Hi. I agree that this solves half the issue. However I believe it doesn't solve the issue of responsiveness. Example: I have my browser window in full-screen mode, width of borderlayout is 1920. And let's say I have my maxsize set to 1000. If I then put my browser in windowed mode @ 1000px width

AndreiArdei ( 2022-03-24 07:07:21 +0800 )edit

The actual east/maxsize value is still 1000 instead of being updated relative to the viewport.

AndreiArdei ( 2022-03-24 07:09:36 +0800 )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: 2022-03-23 00:05:28 +0800

Seen: 7 times

Last updated: Mar 24

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