Título/descrição fica por cima do ícone, como resolver

Detalhes da questão

Endereço do fórum: http://www.brasilplayforever.com/forum
Versão do fórum: phpBB3

Descrição

Olá,

Queria uma solução para este problema: https://imgur.com/a/CR2Yy, queria que tivesse uma quebra de linha ou que ocultasse uma parte do título/descrição para que não dê esse problema.

Saudações amigo!

Adicione em sua CSS o seguinte código:

Código:

.row .dterm[style] {
    background-position: 100% 85% !important;
}
a.topictitle {
white-space: pre-line !important;
}

Att!

Não resultou...

Olá,

Remova o código anterior, trocando-o por este:

Código:

.icon > .dterm[style] {
  padding-right: 90px;
  box-sizing: border-box;
}

o/

O que era pra resolver, resolveu... porém aconteceu isso: https://i.imgur.com/UFVWUet.png, se perceber, os tópicos que possuem ícone, as informações do tópico se posicionaram um pouco mais a frente, ficando desproporcional aos sem ícones.

Tente trocar o código por:

Código:

.icon > .dterm {
  padding-right: 90px;
  box-sizing: border-box;
}

Funcionou.

Tem outro problema agora, o "Respostas ; Visto ; Última Mensagem" ficaram desproporcional... queria que colocassem eles um pouco mais para o lado que ficasse proporcional a seus respectivos lugares, não queria que mexesse embaixo pq ficou bom assim.

https://i.imgur.com/hK3kh2i.png


------> Edit 18:22 (horário de Brasília) <------

Na verdade, funcionou +/-; na descrição do tópico ele 'pula uma linha' quando vai chegar no ícone, mas o título continua indo no ícone: https://i.imgur.com/CKG8vvJ.png.

------> FIM edit <------

Troque por este:

Código:

.icon > .dterm {
  padding-right: 90px !important;
  box-sizing: border-box;
  margin-right: 50px !important;
}

Aconteceu isso: https://i.imgur.com/FhERqRO.png

Ok, vamos fazer diferente.
Remova o código anterior para que eu possa bolar um novo.

Pronto.

Adicione este código:

Código:

.icon > .dterm {
  background-position-x: 100% !important;
}

.icon > .dterm .topic-title > a {
  display: inline-block;
  max-width: 70%;
}

o7

O título, okay. A descrição do tópico tá passando pelo ícone...

Veja esse código:

Código:

.icon > .dterm {
  padding-right: 90px !important;
  box-sizing: border-box;
  margin-right: 40px !important;
}

O estranho é que, no quadrado onde fica os anúncios, isso fica proporcional: https://i.imgur.com/UBOuKXz.png; mas agora o quadro dos tópicos normais, não: https://i.imgur.com/4197AaE.png. E isso acontece no mesmo fórum: https://i.imgur.com/PDJy294.png. Esse foi o código que resolveu o problema do título e descrição, só isso ali que ficou estranho.

O código acima deveria ser retirado.
Este:

Código:

.icon > .dterm {
  background-position-x: 100% !important;
}
 
.icon > .dterm .topic-title > a {
  display: inline-block;
  max-width: 70%;
}

Funcionou, certo? Agora só falta corrigir as descrições, certo?

Qual o ID de um subfórum com descrição? o7

Perdão.

E sim, correto, só falta a descrição.

Aqui está: http://www.brasilplayforever.com/f43-

Precisarei do seu template topics_list_box.

Aí tá o problema, não tenho acesso a ele. Precisa fazer uma gambiarra no css... fundador está ausente.

É meio complicado fazer isso (quase impossível), tendo em vista que não há nenhum seletor para a descrição do fórum.
Usar JavaScript também não é uma opção cogitável.

Só com a edição de templates mesmo. :/

Sem problemas,

E sobre estar desproporcional isso: https://imgur.com/4197AaE tem como dar um jeito? Ou também não?

Creio que seja em relação a sua tela, veja: http://prntscr.com/hajrfc
Pra mim fica normal ;/

Olá, iScroll.

Veja bem, no primeiro quadrado onde são os anúncios, fica normal. Agora onde são os tópicos 'normais', não fica normal, olhe novamente.

No seu CSS procure por:

Código:

.topics .row .icon .dterm, .topics .header .icon dt

e remova:

Código:

width: 57%;

Caso não encontrar, basta adicionar:

Código:

.topics .row .icon .dterm, .topics .header .icon dt {
    width: 50%;
}

Se eu tirar ele, os títulos maiores de alguns tópicos ficam um pouco estranhos e feios visualmente... para não dar mais trabalho, vou deixar assim, não é algo tão importante... o que eu realmente queria arrumar, consegui.

Muito obrigado a vocês.


Abraço,

Tenha calma, podemos resolver isto também, coloque o código de novo para efetuar alguns testes.

No momento estou utilizando esses códigos para isso:

Código:

.row .dterm[style] {
    background-position: 100% 55% !important;
}

.icon > .dterm {
  background-position-x: 100% !important;
}
 
.icon > .dterm .topic-title > a {
  display: inline-block;
  max-width: 70%;
}


.topics .row .icon .dterm,
.topics .header .icon dt {
  width: 57%;
}

E o único problema agora seria mover isso mais para a direita: https://imgur.com/a/NBKlT

O tópico está resolvido? (O ícone está como resolvido).

Coloca "Em curso" novamente, o iScroll se prontificou a tentar concertar este erro que dá.

Coloque o código que eu passei e comente de novo aqui, por favor e me mande o link do tópico que está com o título grande.
Se possível, uma print do que "está feio" também seria bom.

Aqui está: https://i.imgur.com/QlkEsST.png - O título era pra ir "para baixo" quando chegasse no limite, mas ele vai pra cima, aí o "Anúncio Global" fica escrito embaixo... queria que o título continuasse embaixo quando chegasse no limite.

http://www.brasilplayforever.com/f43-


------> Edit 14/11 ~ 22:36 (horário de Brasília) <------
Não tem como fazer assim: https://imgur.com/VP8Yrf3? Que seria pôr reticências (um overflow) depois de uma certa quantidade de caracteres, sei lá... seria mais básico e deve ser mais fácil também.
------> FIM Edit <------

No seu CSS procure:

Código:

div.topic-title-container

Remova:

Código:

    display: inline;

Se não tiver basta adicionar:

Código:

div.topic-title-container {
    display: none;
}

----

Edit:

Caso queira os ... reduzindo o título do tópico basta adicionar:

Código:

.topic-title-container a {
    display: inline-block;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}

Nenhum dos dois códigos surtiu o efeito esperado.

O primeiro some o título. O segundo não acontece o que era para acontecer...

Creio que o erro foi meu, desculpe.
Tente este:

Código:

.topic-title.hierarchy a {
    display: inline-block;
    width: 50%;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Perfeito, já basta.


Valeu iScroll.