Блог

Главная - Вопросы по программированию - Как установить ширину ввода Angular Clarity Design 4.0 на 100%?

Как установить ширину ввода Angular Clarity Design 4.0 на 100%?

#css #angular #vmware-clarity

#css #angular #vmware-clarity

Вопрос:

Для более старых версий у меня нет проблем с переопределением поведения CSS по умолчанию для элементов управления формами Clarity Design, чтобы использовать 100% родительской ширины.

С версией 4.0 я даже не могу установить style="width: 100%" Chrome Inspector для clr-input-container и всех дочерних элементов ( clr-control-container , clr-input-wrapper , input ).

Кому-нибудь повезло, пытаясь заставить входные элементы Clarity Design 4.0 соответствовать ширине 100%?

Ответ №1:

Вы можете использовать clr-* class для применения стиля при вводе. Например,

 .clr-input,
.clr-input-wrapper {
  max-width: 100%;
  width: 100%;
}

.clr-control-container, 
.clr-input-wrapper.clr-input {
  padding-left: 0;
  padding-right: 0;
}

взгляните на этот stackblitz.

Комментарии:

1. Здравствуйте, ваш ответ работает хорошо, если я использую только компоненты CSS. Взгляните на эту ссылку , это тот же Stackblitz, который вы мне прислали, но с компонентом ввода Clarity Angular. Какие-нибудь советы по созданию ширины 100% с помощью компонента Angular input?

2. @IbrahimNetto взгляните на это: stackblitz.com/edit/clarity-light-theme-v2-auvess . Обновленный ответ, дайте мне знать, если вы могли бы принять его.