Область кнопок превышает заданную высоту - PullRequest
Новая
       12

Область кнопок превышает заданную высоту

0 голосов
/ 21 апреля 2020

Я создаю компонент в своем проекте, который будет служить цифрой c вверх / вниз. Я знаю, что у числового ввода HTML5 есть кнопки вверх / вниз в области ввода, но я хочу другой стиль. Компонент выглядит так, как задумано, но поведение кнопки странное. В частности, область верхней кнопки, вытянутая ниже указанной высоты, что приводит к тому, что кнопка «вверх» нажимает кнопку «вниз». Вот элемент управления в действии (в настоящий момент это хак-код; комментарии к нему хороши, но в данный момент он обрабатывается, пока я не выясню это).

https://blazorfiddle.com/s/vg8es6h7 

<span class="input-group col-@Width p-0">
  <input type="number" readonly class="form-control form-control-sm numeric-readonly" value="@Value" min="@MinValue" max="@MaxValue" />
  <span class="input-group-append" style="display: inline-block; width: 21px; line-height: .5; background: #e1e1e1; vertical-align: top;">
    <button type="button" class="btn shadow-none m-0 p-0" style="width: 100%; height: 15px;" @onclick="UpClick">
      <i class="fa fa-chevron-up align-middle" style="font-size: x-small; margin-top: -13px;" />
    </button>
    <button type="button" class="btn shadow-none m-0 p-0" style="width: 100%; height: 15px;" @onclick="DownClick">
      <i class="fa fa-chevron-down align-middle" style="font-size: x-small; margin-top: -13px;" />
    </button>
  </span>
</span>

@code {
  [Parameter]
  public int Value { get; set; }

  [Parameter]
  public int MinValue { get; set; }

  [Parameter]
  public int MaxValue { get; set; }

  [Parameter]
  public int Width { get; set; }

  private void UpClick()
  {
    if (Value == MaxValue)
      return;

    Value++;
  }

  private void DownClick()
  {
    if (Value == MinValue)
      return;

    Value--;
  }
}

Я поиграл с несколькими твиками с помощью панели разработчика (Firefox). Подсветка кнопки показала, что она должна быть только определенного размера c. Только когда я положил другую кнопку между кнопками вверх / вниз, я мог наблюдать фактическую область, которую использует кнопка.

https://blazorfiddle.com/s/u1stt1fv

Отсюда, Я узнал, что высота строки больше указанной высоты. Тем не менее, прямая установка высоты строки (даже с! Важным) не уменьшает область, требуемую для кнопки вверх. Куда я здесь не так?

...