时间戳

首页 > 解决方案 > fieldset 在 angularjs-material 中破坏了我的 flex 布局

javascript - fieldset 在 angularjs-material 中破坏了我的 flex 布局

问题描述

通过查看两个代码示例可以最好地显示我的问题：

第一个在省略时工作正常fieldset

第二个示例显示当fieldset激活时，长文本会将布局移出窗口。（在整页视图中）

但是，当您缩短文本时，它会起作用并且将符合 flex 布局。

现在我的问题是，当我在当前正在处理的布局中忽略它时fieldset，它适用于 chrome 和 firefox，但在 IE11 中失败。插入时fieldset，所有浏览器下的布局看起来都很好，但是在文本字段中输入长文本时出现上述问题，不幸的是这个文本字段是用于发布链接的，所以假设文本可以得到很容易很长。

我发现一个帖子显示了我的页面在省略fieldset.

https://github.com/angular/material/issues/5084

这是两个片段：工作的片段：

angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">

<!--   <fieldset> -->
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
                at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
                (injected humour and the like).
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
<!-- </fieldset> -->
</body>

和不工作的一个fieldset启用：

angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">

<fieldset>
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
                at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
                (injected humour and the like).
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
</fieldset>
</body>

问题

是否有可能，如果是，我如何让布局与fieldset？

标签： javascriptcssangularjsflexboxangularjs-material

解决方案

添加min-inline-size: auto到fieldset固定宽度-fieldset具有min-inline-size: min-content由浏览器用户代理设置的计算样式。对于不支持此属性的用户代理，您不会遇到此问题。

请参阅下面的演示：

angular.module('MyApp', ['ngMaterial']);
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">
<fieldset style="min-inline-size: auto">
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
                at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
                (injected humour and the like).
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
</fieldset>
</body>

推荐阅读