Elementos desalinhados na exibição do perfil
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1 • Compartilhe
Elementos desalinhados na exibição do perfil
Detalhes da questão
Endereço do fórum: https://potter-more.forumeiros.com/u2
Versão do fórum: phpBB3
Descrição
Pessoal,
Gostaria de saber se é possível alinhar, na exibição dos perfis, as informações de preenchimento. Atualmente, está assim:
![Elementos desalinhados na exibição do perfil Image](https://cdn.discordapp.com/attachments/437086106949779459/1200975529742979122/image.png)
Gostaria que ficasse assim:
![Elementos desalinhados na exibição do perfil Image](https://cdn.discordapp.com/attachments/437086106949779459/1200976067503063101/image.png?ex=65c8231f&is=65b5ae1f&hm=b527e0ec8e37a0926d5b771cf7591199ab8c49727faa17d4d920da9cc5058631&)
Já tentei acrescentar um .ps-down { no CSS, mas não surtiu efeito.
Além disso, se possível, gostaria que o espaço entre os dois ponto fosse removido, ou que os próprios dois pontos sumissem.
Está assim - Arquétipo : espreitador
Gostaria que ficasse assim - Arquétipo: espretador OU Arquétipo espreitador
Obrigada.
Re: Elementos desalinhados na exibição do perfil
Olá!
Tudo o que solicita, é relativamente fácil de resolver!
Pode fornecer uma conta de testes? Não consigo ver essa informação sendo "convidado".
Hancki
Tudo o que solicita, é relativamente fácil de resolver!
Pode fornecer uma conta de testes? Não consigo ver essa informação sendo "convidado".
Hancki
Re: Elementos desalinhados na exibição do perfil
Oi, Hancki, obrigada pela ajuda.
Enviei, via MP, login e senha de uma conta teste.
Enviei, via MP, login e senha de uma conta teste.
Re: Elementos desalinhados na exibição do perfil
Olá!
Deixo abaixo o código CSS para obter o resultado pretendido:
O que basicamente fiz foi colocar o elemento ".psfield" com uma largura máxima de 20%, considerando serem 5 elementos horizontais; ou seja, 100% a dividir por 5 elementos, dá 20% por cada elemento. Desta forma, fica tudo na mesma linha horizontal.
Quando ao esconder os 2 pontos, eu inseri uma letra invisível com fundo após os dois pontos o e "movi" a letra invisível para a esquerda, sobrepondo-se aos 2 pontos. Com CSS nem sempre é fiável de se fazer, normalmente alteramos o código fonte ou utilizamos Javascript para isso, mas parece ter resultado.
Avalie e dê retorno.
Hancki
Deixo abaixo o código CSS para obter o resultado pretendido:
- Código:
.ps-down .psfield {
max-width: 20% !important;
}
.ps-down .psflabel:after {
content: ' a';
color: transparent !important;
background-color: var(--fondo1);
margin-left: -10px !important;
}
.ps-down .psflabel {
padding-left: 15px;
}
O que basicamente fiz foi colocar o elemento ".psfield" com uma largura máxima de 20%, considerando serem 5 elementos horizontais; ou seja, 100% a dividir por 5 elementos, dá 20% por cada elemento. Desta forma, fica tudo na mesma linha horizontal.
Quando ao esconder os 2 pontos, eu inseri uma letra invisível com fundo após os dois pontos o e "movi" a letra invisível para a esquerda, sobrepondo-se aos 2 pontos. Com CSS nem sempre é fiável de se fazer, normalmente alteramos o código fonte ou utilizamos Javascript para isso, mas parece ter resultado.
Avalie e dê retorno.
Hancki
Re: Elementos desalinhados na exibição do perfil
Oi, Hancki. Muito obrigada.
Os elementos ficaram perfeitamente alinhados, mas os dois pontos : permanecem lá e, agora, há um espaço separando o nome do campo da resposta. Veja:
![Elementos desalinhados na exibição do perfil Image](https://cdn.discordapp.com/attachments/463398366395629578/1202012357480415352/image.png)
Dei direitos de administrador para a conta que você tem acesso ao fórum, caso ajude em algo.
Os elementos ficaram perfeitamente alinhados, mas os dois pontos : permanecem lá e, agora, há um espaço separando o nome do campo da resposta. Veja:
![Elementos desalinhados na exibição do perfil Image](https://cdn.discordapp.com/attachments/463398366395629578/1202012357480415352/image.png)
Dei direitos de administrador para a conta que você tem acesso ao fórum, caso ajude em algo.
Re: Elementos desalinhados na exibição do perfil
Olá!
Está resolvido. Removi o CSS que coloquei para tentar esconder os 2 pontos e substitui com Javascript (criei uma nova página Javascript, por favor verifique).
O código utilizado:
Hancki
Está resolvido. Removi o CSS que coloquei para tentar esconder os 2 pontos e substitui com Javascript (criei uma nova página Javascript, por favor verifique).
O código utilizado:
- Código:
document.addEventListener("DOMContentLoaded", function() {
// Checkar se a página que o código vai executar é um perfil de utilizador = "/u"
if (window.location.href.indexOf("/u") > -1) {
// Selecionar o elemento que contem os 2 pontos
var psflabel = document.querySelectorAll('.ps-down .psfield .psflabel');
// Fazer um scan por todos os elementos selecionados que contenham o texto " :"
psflabel.forEach(function(substituir) {
substituir.textContent = substituir.textContent.replace(' :', '');
});
}
});
Hancki
Re: Elementos desalinhados na exibição do perfil
Sim, é possível alinhar as informações no perfil ajustando o CSS. Você tentou usar .ps-down, mas talvez seja necessário outro seletor ou propriedade. Para remover o espaço ou os dois pontos, você pode ajustar o CSS ou o HTML, dependendo de como o texto é gerado.
Re: Elementos desalinhados na exibição do perfil
Obrigada! O problema foi resolvido pelo Hancki.
![Ajudeiro Ajudeiro](https://i.imgur.com/uwJbOFU.png)
Re: Elementos desalinhados na exibição do perfil
Tópico resolvidoMovido para "Questões resolvidas". |
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Icones de perfil desalinhados
» Exibição do perfil do usuário
» Links desalinhados
» Sub-foruns desalinhados
» Ícones desalinhados
» Exibição do perfil do usuário
» Links desalinhados
» Sub-foruns desalinhados
» Ícones desalinhados
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos