Tags
People
Badges
Help
Alright. Thanks a lot! Will be looking forward to this feature :D
AndreiArdei ( 2022-03-24 15:41:31 +0800 )edit-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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
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
Alright. Thanks a lot! Will be looking forward to this feature :D
AndreiArdei ( 2022-03-24 15:41:31 +0800 )editJust 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.
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 )editThe actual east/maxsize value is still 1000 instead of being updated relative to the viewport.
AndreiArdei ( 2022-03-24 07:09:36 +0800 )editAsked: 2022-03-23 00:05:28 +0800
Seen: 7 times
Last updated: Mar 24 '22