Выравнивание поля ввода по левому краю
В данный момент я занимаюсь стилизацией формы и борюсь с довольно простой проблемой.
Я работаю над приложением Ionic 3 и хочу, чтобы ngClass для ввода был короче, чем обычно.
если я просто установлю ширину ввода на X%, это будет выглядеть так:
Мой CSS выглядит так:
.formInput{
width:100%;
::placeholder{
padding-left: 1% !important;
}
padding-left: 1% !important;
margin-top: 1%;
background-color: white;
border: 1px solid rgb(145, 145, 145);
border-radius: 10px ;
color: #78C800;
}
Обновлено:
HTML:
<ion-item class = "formItem" *ngIf = "obj.show">
<ion-label stacked>{{obj.label}}</ion-label>
<ion-input class = "formInput shorten" *ngIf = "pageIsReady" type = "{{obj.type}}" [placeholder] = "obj.></ion-input>
</ion-item>
Я пробовал float: left и text-align: left как на входе, так и на ионном элементе. Но ничего не работает.
вход ионный? вы можете показать HTML-часть этого?
Ответы 4
Добавить float: left; или выравнивание текста: слева; в вашем CSS для .formInput
Обновлено:
Я понял: вы должны отдельно поставить .formInput :: placeholder {}, тогда все заработает.
.formInput{
width:100%;
float:left;
padding-left: 1% !important;
margin-top: 1%;
background-color: white;
border: 1px solid rgb(145, 145, 145);
border-radius: 10px ;
color: #78C800;
}
.formInput::placeholder{
padding-left: 1% !important;
}
будут ли другие свойства?
я изменил его на последнее свойство. Все еще не работает.
Теперь попробуйте то же самое: дайте ему еще одну попытку, если это не сработает, должна быть какая-то другая проблема ...
даже если я полностью удаляю заполнитель ::, он все равно не работает. Кажется, я сломал CSS: |
Просто проверьте другие части вашего CSS
Спасибо! Я просто работаю над этим с запасом, пока не найду решение
он вложен, потому что OP использует SCSS. вывод на улицу ничего не делает
Добавить float: left в поле ввода.
.formInput{
width:100%;
float:left;
::placeholder{
padding-left: 1% !important;
}
padding-left: 1% !important;
margin-top: 1%;
background-color: white;
border: 1px solid rgb(145, 145, 145);
border-radius: 10px ;
color: #78C800;
}
Я пробовал это, но у меня это не работает. Он все еще выравнивается в центре
Вы пробовали встроенный стиль?
я сделал, и это не работает. Все это внутри formArray, может быть, в этом проблема? Я проверил его в браузере, и нет ничего, что могло бы помешать его выравниванию по левому краю
ion-input использует flexbox для выравнивания содержимого:
CSS по умолчанию из элемента проверки:
position: relative;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
Используйте align-self:flex-start для выравнивания по левому краю в вашем классе
.formInput{
width:50%;//or X%
::placeholder{
padding-left: 1% !important;
}
padding-left: 1% !important;
margin-top: 1%;
background-color: white;
border: 1px solid rgb(145, 145, 145);
border-radius: 10px ;
color: #78C800;
align-self: flex-start;//here
}
Вместо этого измените ширину .formItem.
Например:
.formItem {
width: 60%;
float: left;
}
.formInput {
width: 100%;
...
}
добавьте эту часть в css
float:left, и вы не добавили нижние стили нигде в соответствии с фрагментом. пожалуйста, дайте мне знать, работает ли это, я могу добавить в качестве ответа :)