Сохранение статической ширины элементов после удаления другого элемента, оставаясь при этом отзывчивым - PullRequest
Новая
       5

Сохранение статической ширины элементов после удаления другого элемента, оставаясь при этом отзывчивым

0 голосов
/ 28 мая 2019

У меня есть кнопка с текстом, и когда пользователь нажимает кнопку, я заменяю ее символом загрузки. Когда я удаляю текст внутри кнопки и заменяю его вращателем, кнопка сжимается.

Я создал скрипку проблемы .

Я знаю, что могу просто добавить фиксированную ширину к элементу, однако страница чувствительна вплоть до 300 пикселей. Я также знаю, что могу добавить медиа-запросы для решения этой проблемы, но мне интересно, есть ли какой-нибудь более простой способ с помощью LESS или ванильного CSS обрабатывать это без всех медиа-запросов?

Вот мои основные настройки: 

<button>
  <span class="hidden-conditionally">
    Click here to perform an action!
  </span>

  <span id="spinner" class="displayed-conditionally">
    Loading...
  </span>
</button>

1 Ответ

1 голос
/ 28 мая 2019

Вы можете установить минимальную ширину этой «кнопки» на 100% (или что-либо еще, что действительно плавает на вашей лодке).Таким образом, кнопка будет вынуждена занимать одинаковое количество доступного пространства, предлагаемого любым родительским элементом, независимо от содержимого внутри кнопки: 

<button style="min-width:100%">
  <span class="hidden-conditionally">
    Click here to perform an action!
  </span>

  <span id="spinner" class="displayed-conditionally">
    Loading...
  </span>
</button>

Это исправление не обязательно должно быть атрибутом встроенного стиля, оно можеттакже будет добавлен в связанный файл .css.

...