This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
When I use layout-wrap with flex="33", cell wrapping creates unwanted space at the end of rows in 1.0.0-rc1 #5346
Description
Take a look at this code, and render it with a medium screen:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Simple Layout</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet"
href="./lib/angular-material/angular-material.css"/>
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
<style>
div.flex, div.flex-25 {
border: 1px dotted gray;
background-color: #FFE0B2; /* Orange 100 */
text-align: center;
padding: 16px;
}
div.layout-row, div.layout-columm {
background-color: #90CAF9; /* Blue 200 */
}
</style>
</head>
<body ng-app="myApp"
layout="column">
<div layout="row" layout-sm="column">
<div flex>Cell #1</div>
<div flex>Cell #2</div>
<div flex>Cell #3</div>
</div>
<div layout="row" layout-wrap
style="margin-top:24px;">
<div flex="25"
flex-md="33"
flex-sm="50">Cell #4</div>
<div flex="25"
flex-md="33"
flex-sm="50">Cell #5</div>
<div flex="25"
flex-md="33"
flex-sm="50">Cell #6</div>
<div flex="25"
flex-md="33"
flex-sm="50">Cell #7</div>
<div flex="25"
flex-md="33"
flex-sm="50">Cell #8</div>
<div flex="25"
flex-md="33"
flex-sm="50">Cell #9</div>
</div>
<!-- Angular/Material scripts -->
<script src="./lib/angular/angular.js"></script>
<script src="./lib/angular-animate/angular-animate.js"></script>
<script src="./lib/angular-aria/angular-aria.js"></script>
<script src="./lib/angular-material/angular-material.js"></script>
<!-- App-specific scripts -->
<script type="text/javascript">
angular
.module('myApp', ['ngMaterial'])
</script>
</body>
</html>You can see what the issue is:
