Fancy Form Input text-align right?

1

Hi,
I was wondering if somebody managed to make form inputs, especially with labels, floating labels, clear button… align to the right?

I use it a lot for numeric inputs like prices, and therefore it would be great to have it aligned to the right. I tried it already by changing some css, but it looks more difficult than I expected :wink: So - maybe someone else managed it already and want’s to share here? :wink:

And of course it would be also great to have native support for the as well!

2

Hi,

I know it has been some time since your post but wanted to share some CSS as I needed a similar thing and this was one of the only posts that showed when searching Google.

The following code is working for me to align right and align center.

// Align floating input to right
.item-input-right .item-inner {
	align-items: flex-end;
}

.item-input-right .item-floating-label {
	left: calc(var(--f7-input-outline-padding-horizontal) - 53px);
	transform-origin: unset;
}

.item-input-right input {
	text-align: right;
	padding-right: 45px !important;
}

// Align floating input to center 
.item-input-center .item-inner {
	align-items: center;
}

.item-input-center .item-floating-label {
	left: unset;
	transform-origin: center;
}

.item-input-center input {
	text-align: center;
}

All you should have to do is add the class item-input-right or item-input-center to the element that has the item-input class.

This code was tested on inputs with floating labels but I have not verified it on any other input styles.

Thanks,
Daniel

2 Likes