Organização de texto e ícones no grupo repetidor

Olá! Recentemente criei um Premium para o meu app, e agora estou querendo colocar “Badges” nas postagens dos utilizadores. Eis o meu problema:
Quando o nome do usuário é pequeno, o ícone do premium fica longe do nome do usuário, e quando o nome do usuário é grande, fica por cima da badge.
Como resolver isso?

image
(Badge que fica longe do nome)

image
(nome que fica por cima da badge)

Opa @juoum, sugiro ver se no editor seu texto não está fazendo overlap com a imagem.
O ideal é não deixar elementos ficarem um em cima do outro, exatamente pra não ocorrer com isso.

1 Like

Olá! Sim,está fazendo overlap,porém esse não é o problema. Também,quando o nome é pequeno,o distanciamento do ícone ao nome é muito. Gostaria que o ícone se adapta-se ao tamanho do nome. Nomes maiores, ícone seria empurrado pra frente, nomes menores, p ícone seria puxado para trás coladinho ao nome.
Obrigado.

Então, não tenho tanta experiência no assunto, mas tipo, no meu ponto de vista, o elemento está vinculado a caixa e não ao texto, nota q houve alteração no tamanho do texto, mas não no input onde está o texto, por isso o ícone ficou no mesmo lugar, vc pode tentar mudar o input de exibição, para uma caixa de texto, e deixar ele com 20 px, e colocar o ícone FORA da caixa de texto, porém colado, ir em responsivo e desmarcar a caixa q que corta o texto quando ele for maior q a caixa do texto, e fazer o teste, assim creio q vc vai vincular a posição do ícone ao tamanho do texto dogitado, e não a caixa onde o texto e digitado, a e não esquece de marcar o colapse witch margen, para o texto não ficar restrito a essa questão tbm