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

Posted

技术标签:

【中文标题】fieldset 在 angularjs-material 中破坏了我的 flex 布局【英文标题】：fieldset breaks my flex layout in angularjs-material 【发布时间】：2019-07-09 16:35:10 【问题描述】：

我的问题最好通过查看两个代码示例来说明：

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

第二个例子表明当fieldset处于活动状态时，长文本会将布局移出窗口。 （全页视图）

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

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

我发现一个帖子显示了我的页面在省略 fieldset 时的大致外观。

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

这里有两个 sn-ps： 工作的人：

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  src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg"  />
      </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  src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg"  />
      </div>
    </div>
    </div>
</fieldset>
</body>

问题

是否可以，如果可以，我如何使布局与fieldset 一起使用？

【问题讨论】：

相关：***.com/q/35464067/3597276 【参考方案1】：

将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  src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg"  />
      </div>
    </div>
    </div>
</fieldset>
</body>

【讨论】：

以上是关于fieldset 在 angularjs-material 中破坏了我的 flex 布局的主要内容，如果未能解决你的问题，请参考以下文章

在 HTML 中使用 <fieldset> 时，边框周围不会出现线条

fieldset标签的使用

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

Django UserAdmin的add_fieldsets？

<fieldset>和<legend>标签的使用

fieldset框大小怎么设定呢？