Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-3798

Flex with minimum and maximum size

    Details

    • Type: New Feature
    • Status: Open
    • Priority: Critical
    • Resolution: Unresolved
    • Affects Version/s: 8.5.0
    • Fix Version/s: None
    • Component/s: General
    • Security Level: Jimmy
    • Labels:
      None

      Description

      Is it possible to say ZK to consider minimum and maximum sizes (css min-height max-height min-width max-width) of components at the same time with hflex="1" and vflex="1"

        Activity

        Hide
        pe4enko pe4enko added a comment -

        For example i have parent with size 300px, and two children with equal hflex.
        ZK compute size of this children = 150px, and then browser set min-width for first component = 200px
        The sum of sizes of children will 350px. I want that ZK comute size for first children 250px and for second children as 50 px

        <div id ="parent" style="width: 300px">
            <div id="child1" style="min-width: 200px" hflex="1"/>
            <div id="child2" hflex="1"/>
        </div>
        
        Show
        pe4enko pe4enko added a comment - For example i have parent with size 300px, and two children with equal hflex. ZK compute size of this children = 150px, and then browser set min-width for first component = 200px The sum of sizes of children will 350px. I want that ZK comute size for first children 250px and for second children as 50 px <div id = "parent" style= "width: 300px" > <div id= "child1" style= "min-width: 200px" hflex= "1" /> <div id= "child2" hflex= "1" /> </div>
        Hide
        cor3000 cor3000 added a comment -

        a simple way to gain min/max width control using CSS flexbox
        -> http://zkfiddle.org/sample/1i7mkq6/1-min-max-width-flex

        alsp possible to achieve the 250/50 split using flexbox with grow/shrink/basis properties
        -> http://zkfiddle.org/sample/1i7mkq6/2-css-flexbox

        Show
        cor3000 cor3000 added a comment - a simple way to gain min/max width control using CSS flexbox -> http://zkfiddle.org/sample/1i7mkq6/1-min-max-width-flex alsp possible to achieve the 250/50 split using flexbox with grow/shrink/basis properties -> http://zkfiddle.org/sample/1i7mkq6/2-css-flexbox
        Hide
        pe4enko pe4enko added a comment -

        a simple way to gain min/max width control using CSS flexbox

        It's not working as needit.
        Try this example

        <zk>
          <div style="display: flex; width: 300px">
            <div style="flex: 1; border: 1px solid red; min-width: 200px" height="80px"/>
            <div style="flex: 1; border: 1px solid blue" height="40px"/>
          </div>
        </zk>

        The second div set size 100, at the same time first div not resize to 250px.

        Show
        pe4enko pe4enko added a comment - a simple way to gain min/max width control using CSS flexbox It's not working as needit. Try this example <zk> <div style= "display: flex; width: 300px" > <div style= "flex: 1; border: 1px solid red; min-width: 200px" height= "80px" /> <div style= "flex: 1; border: 1px solid blue" height= "40px" /> </div> </zk> The second div set size 100, at the same time first div not resize to 250px.

          People

          • Assignee:
            Unassigned
            Reporter:
            pe4enko pe4enko
          • Votes:
            1 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

            • Created:
              Updated:

              Time Tracking

              Estimated:
              Original Estimate - 1 day
              1d
              Remaining:
              Remaining Estimate - 1 day
              1d
              Logged:
              Time Spent - Not Specified
              Not Specified