Свойство display: table-cell не срабатывает на инпутах

#html #css #вёрстка #input #layout

Нужно сделать, чтобы кнопки в ряд занимали всю ширину .row.

Сейчас они смещены влево и не тянутся на всю ширину, хотя им присвоено свойство display:
table-cell;.

Вопрос: почему display: table-cell не работает для инпутов? И можно ли достичь желаемого
результата не оборачивая input в дополнительные div?



.row{
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
 }
.input{
  display: table-cell;
 }

  
  
  
  




    

Ответы

Ответ 1

Нужно переделывать на Flexbox, если количество кнопок неизвестно:



.row {
  height: 25px;
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap
}
.row input {
  page-break-inside: avoid;
  break-inside: avoid;
}

  
  
  
  
  





Или же поставить ширину 25%, если их количество фиксированно:



.row{
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
 }
.input{
  width: 25%;
  /* Убираем влияние padding и border на конечную ширину input */
  box-sizing: border-box;
  /* Обнуляем margin */
  margin: 0;
 }

  
  
  
  



Ответ 2

Можно заменить display: table на display: flex + добавить свойство для потомков flex-grow: 1.



.row {
  display: flex;
  width: 100%;
  border-spacing: 1px 0;
  background-color: #eee;
}

.input {
  flex-grow: 1;
}

  
  
  
  

CSS блоки нестандартной формы

#html #css #вёрстка #layout #clip_path

Верстаю уже давно, но такой блок первый раз вижу. Гуглил, не нашел там ничего особо.
Как можно такое сверстать ?
    

Ответы

Ответ 1

Да собственно наука не сложная 

Открываем векторный редактор и обводим декоративные фигуры и группируем их это будет
типа основы для нашего паттерна

Дальше ищем нужное изображение, я взял размер из головы 300х300 и получаем итоговый
вариант

А дальше обычный html: https://codepen.io/topicstarter/pen/KjqMPg 


  Если что то не ясно спрашивайте









И собственно всё

Каков уровень востребованности ресурсов для каждого layout?

#android #xml #layout

В процессе разработки столкнулся с вопросом: сколько ресурсов требует каждый layout?
(Linear, Relative, Tab, Constraint, Coordinator)

В сложных view-представлениях приложения оправдано ли использование исключительно
маловесных layout?
    

Ответы

Ответ 1

В общем случае, при одноуровневой верстке, в порядке возрастания потребления ресурса:

FrameLayout - LinearLayout  - RelativeLayout - ConstraintLayout 

Однако, при вложенности одного контейнера в другой, потребление ресурса существенно
увеличивается. Так как на практике встречается очень мало таких версток, где достаточно
одного простого контейнера (как Frame или Linear), то в большинстве случаев оптимальным
решением будет ConstraintLayout, как контейнер, изначально задуманный, как одноуровневый
и имеющий большое количество атрибутов для комфортной реализации практически любой
верстки, без вложенности одного контейнера в другой. В этом его преимущество перед
более простыми контейнерами, если же вложить в него другие - оно будет утрачено.

С другой стороны, если макет можно сверстать в одноуровневый FrameLayout (например,
контейнер для Fragment) или LinearLayout (например, айтем списка), то это будет гораздо
более оптимальное решение в плане потребления ресурсов.

TableLayout это двухуровневый LinearLayout (вертикальный, в который вложены горизонтальные)

RelativeLayout с одной стороны несколько легче ConstraintLayout, с другой стороны
существенно проигрывает ему в возможностях позиционирования виджетов и, наверное, в
настоящее время не сильно востребован.

такие вещи, как CoordinatorLayout, AppBarLayout не имеют альтернатив реализации и
потребление ими ресурсов оценивается только с позиции использовать или нет, хотя особого
аппетита к ресурсам за ними вроде не замечено.

Несколько тестов различных разметок: сравнение производительности разных контейнеров,
контейнер с вложенными контейнерами против ConstraintLayout

Так же для оценки производительности разметки вы можете использовать инструмент Hierarchy
Viewer. С версии студии 3 он объявлен устаревшим и в качестве замены предлагается Layout
Inspector, но он не показывает время на рендеринг разметки.
Теперь запустить Hierarchy Viewver можно из Android Device Monitor, который в свою
очередь можно запустить из папки

 .../android_sdk/tools/monitor.bat


PS: Сейчас google рекомендует оценивать производительность UI через Systrace, однако
результаты ее не так просты и наглядны, как у Hierarchy Viewr

Свойство display: table-cell не срабатывает на инпутах

Нужно сделать, чтобы кнопки в ряд занимали всю ширину .row
Сейчас они смещены влево и не тянутся на всю ширину, хотя им присвоено свойство display: table-cell;
Вопрос: почему display: table-cell не работает для инпутов? И можно ли достичь желаемого результата не оборачивая input в дополнительные div?
.row{ display: table; table-layout: fixed; width: 100%; border-spacing: 1px 0; background-color: #eee; } .input{ display: table-cell; }

Ответ

Нужно переделывать на Flexbox, если количество кнопок неизвестно:
.row { height: 25px; display: flex; flex-direction: column; flex-wrap: wrap } .row input { page-break-inside: avoid; break-inside: avoid; }

Или же поставить ширину 25%, если их количество фиксированно:
.row{ display: table; table-layout: fixed; width: 100%; border-spacing: 1px 0; background-color: #eee; } .input{ width: 25%; /* Убираем влияние padding и border на конечную ширину input */ box-sizing: border-box; /* Обнуляем margin */ margin: 0; }