Неправильный стиль элемента формы, только когда он находится в неустановленном теге HTML Details - PullRequest
Новая
       12

Неправильный стиль элемента формы, только когда он находится в неустановленном теге HTML Details

0 голосов
/ 05 января 2019

Образец элемента управления формы, взятый из документации фреймворка Bulma CSS, работает должным образом с использованием Bulma 0.7.2 (последний на момент написания).

Однако, когда форма помещается внутри стандартного тега html <details>, высота элемента изменяется, и изменяется некоторая ширина (входного значения?), Поэтому при наведении указателя мыши появляется визуальный сбой.

Что является причиной этого, и есть ли стиль, который можно применить к тегу <details>, который бы правильно отображал элемент формы? 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">

<div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <a class="button is-info">
      Search
    </a>
  </div>
</div>

<br>
<br>

<details>
  <div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <a class="button is-info">
      Search
    </a>
  </div>
</div>
</details>

Редактировать: в качестве более минимального примера стиль также неправильный для одного элемента <input class="input" type="text" placeholder="Find a repository"> внутри тега <details>.

1 Ответ

0 голосов
/ 05 января 2019

Причина, по которой это происходит, заключается в том, что отступ во входе и кнопке рассчитывается на основе их значений, а поскольку вход находится внутри тега <details>, он должен как-то влиять на пропорции - см. Изображение ниже:

enter image description here

Я не знаком с этой платформой, я не уверен, что был бы способ исправить проблему. В любом случае самым быстрым обходным решением будет нацеливание на вход и кнопку внутри тега <details> и добавление статического верхнего и нижнего отступов 0 к кнопке и входу внутри тега <details>: 

details .input,
details .button{
  padding-bottom: 0;
  padding-top: 0;
}

После этого я обнаружил, что если уменьшить максимальную ширину ввода до 89% вместо 100%, это устранит проблему с зависанием: 

details .input{
  max-width: 89%;
}
...