Текстовое поле ввода компонентов материала обрезается

Просто запустил barebones «материал-компоненты-сеть», и я не могу заставить поле ввода выглядеть так, как должно. JS-взаимодействие отлично работает. Тема выглядит хорошо. Но мое поле обрезается Текстовое поле ввода компонентов материала обрезается

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

03.07.2018 01:02

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 232

Ответы 2

Обычно это происходит, когда .mdc-text-field__input имеет неправильный box-sizing (например, наследует рамку родительского .mdc-text-field). Убедитесь, что .mdc-text-field__input имеет начальные размеры коробки:

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

03.07.2018 09:10

У меня сработало следующее: добавить следующее в настраиваемую таблицу стилей.

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

24.01.2021 00:55

Другие вопросы по теме

Меню выбора компонентов материального дизайна некорректно отображается в Интернете

Метка текстового поля компонента Material Design не перемещается вверху слева

Как включить текстовое поле, выделенное Material.io, в приложение, отличное от Node.js

Веб-компоненты материалов - Автономная инициализация

Использование класса MDCSnackbarFoundation

Как я могу добавить изображение заголовка в ящик в сети компонентов материалов Google?

Телефонный разговор / Cordova Material Design MDC

Как использовать MDCRipple.attachTo для нескольких кнопок в React Component

MDC-Web через CDN с отдельными компонентами: window.mdc.autoInit не является функцией

Настройка webpack 4.0 для использования Google Material Design SASS с ExtractTextPlugin

Текстовое поле ввода компонентов материала обрезается

Ответы 2

Другие вопросы по теме

Похожие вопросы