个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 23:06:14 24 4
gpt4 key购买 nike

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

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

第二个例子表明，当fieldset激活时，长文本会将布局移出窗口。 (在全页 View 中)

当您缩短文本时，它会起作用并且符合 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 一起工作？

最佳答案

将 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>

关于javascript - fieldset 破坏了我在 angularjs-material 中的 flex 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54710922/

24 4 0
文章推荐： javascript - 如何让 eslint 检测 JSON 文件中的规则违规？
文章推荐： javascript - 将图像上传到 Canvas p5js
文章推荐： android - 无法再运行我的应用程序说“INSTALL_FAILED_VERIFICATION_FAILURE
文章推荐： javascript - javascript 如何在内部表示大于 Number.MAX_SAFE_INTEGER 的整数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com