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:



Gostaria que ficasse assim:



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.

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

Oi, Hancki, obrigada pela ajuda.

Enviei, via MP, login e senha de uma conta teste.

Olá!

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 resultado é este: https://prnt.sc/7rL6jJQkSQA3

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

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:



Dei direitos de administrador para a conta que você tem acesso ao fórum, caso ajude em algo.

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:

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(' :', '');
        });
    }
});

Resultado: https://prnt.sc/sDHSIUMxPkfv

Hancki

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.

Obrigada! O problema foi resolvido pelo Hancki.