flex layout bug

Sciter Forums Layout flex layout bug

This topic contains 3 replies, has 2 voices, and was last updated by  Tini 1 month ago.

  • Author
    Posts
  • #49044

    Tini
    Participant

    Hi Andrew.
    There seems to be a bug in flex layout calculations. In the code below, the first, third & fourth “.tab” should be identical, yet the first “.tab” displays smaller than the other ones.

    <html>
    <head>
    <style>
    .tabbar {
    	flow: horizontal;
    	height: 20mm;
    	background-color: #FF000040;
    	border: .5mm solid #FF0000;
    }
    .tabs {
    	flow: horizontal;
    	height: *;
    	width: *;
    	// max-width: max-content;
    	margin: 1mm;
    	background-color: #0000FF40;
    	border: .5mm solid #0000FF;
    }
    .tab {
    	height: *;
    	width: 1*;
    	min-width: 10mm;
    	max-width: 40mm;
    	margin: 1mm;
    	background-color: #00FFFF80;
    	border: .5mm solid #00FFFF;
    }
    .tab[selected] {
    	width: 1000*;
    	background-color: #0088FF80;
    	border-color: #0088FF;
    }
    .new {
    	height: *;
    	width: 10mm;
    	margin: 1mm;
    	background-color: #FFFF0040;
    	border: .5mm solid #FFFF00;
    }
    
    </style>
    <script type="text/tiscript">
    self.on("click", ".tab", function (evt){
    	var act = self.$(.tab[selected]);
    	if (act && act != this) {		
    		act.attributes.remove("selected");
    		this.attributes["selected"] = "";
    	}
    })
    </script>
    </head>
    <body>
    	<div class="tabbar">
    		<div class="tabs">
    			<div class="tab"></div>
    			<div class="tab" selected></div>
    			<div class="tab"></div>
    			<div class="tab"></div>
    		</div>
    		<div class="new" />
    	</div>
    </body>

    Essentially all “.tab”s that are before the selected one, are sized to their min-width, while the “.tab”s that are after the selected one are sized to their max-width.

    What I’m trying to achieve is the following. The active tab should start to shrink after all non-active tabs are shrinked to their min-width.

    correct impl

    • This topic was modified 1 month ago by  Tini.
    • This topic was modified 1 month ago by  Tini.
  • #49047

    Tini
    Participant

    This is how it looks like:

    sciter impl

    • #49048

      Andrew
      Keymaster

      Yes, that does not look right, fixing.

  • #49049

    Tini
    Participant

    While you are at it, try to uncomment the “max-width: max-content” line. I don’t know if it’s another manifestation of the same bug or something else,but all tab’s get shrink to their min-width.

You must be logged in to reply to this topic.