文章/答案/技术大牛

发布

社区首页 >问答首页 >材料组件输入文本字段被截断

问材料组件输入文本字段被截断
EN

Stack Overflow用户

提问于 2018-07-03 07:02:40

回答 2查看 1.5K关注 0票数 0

只是简单地运行"material-components-web“，我不能让输入域看起来像它应该的样子。JS interaction运行得很好。主题看起来不错。但是我的领域被切断了

index.html：

<html>
 <head>
   <link rel="stylesheet" href="bundle.css">
   <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
 </head>
 <body class="mdc-typography">
    <h1 class="mdc-typography--headline1">Big header</h1>
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
      <input class="mdc-text-field__input" type="text" id="input">
      <label for="input" class="mdc-floating-label">Input Label</label>
      <div class="mdc-line-ripple"></div>
    </div>

    <!-- at the bottom of the page -->
    <script src="bundle.js"></script>
</body>
</html>

app.scss：

@import "material-components-web/material-components-web";

app.js：

import * as mdc from 'material-components-web'
mdc.autoInit()

我没有其他的文件了。未添加其他样式。可能会发生什么？

material-design

material-components-web

回答 2

Stack Overflow用户

发布于 2018-07-03 15:10:44

当.mdc-text-field__input的box-sizing不正确时，通常会发生这种情况(例如，继承父.mdc-text-field的边框)。请确保.mdc-text-field__input具有初始框大小：

.mdc-text-field__input {
  box-sizing: initial; // or content-box
}

票数 1

Stack Overflow用户

发布于 2021-01-24 07:55:50

下面的方法适用于我:将以下代码添加到自定义样式表中。

.mdc-text-field {
  width: -webkit-fill-available;
  width: fill-available;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51144658

复制

相似问题

问材料组件输入文本字段被截断
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材料组件输入文本字段被截断EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材料组件输入文本字段被截断
EN