5

Gostava de saber se há alguma hipótese do clip: rect(...) realmente 'cortar' o elemento em questão, não o ocultando apenas.

Aqui nesta imagem, sem o clip: rect(...), mostra o borda a exceder o espaço do seu container (caixa branca) e consequentemente o scroll horizontal aparece.

sem clip

Nesta vemos a mesma coisa mas com o clip: rect(...), e não vemos nada a exceder o container, apenas o seu 'vazio'. O que influencia também a scroll horizontal.

com clip

Todo o conteúdo é ajustável á largura do ecrã, se eu aumentar ou diminuir a largura da janela, o scroll horizontal manté-se igual.

Resumidamente, gostava de saber de uma solução para essa borda não ocupar aquele espacinho a mais.

4
  • 1
    Você não poderia usar dimensões absolutas no border-radius, e reduzir o container?
    – bfavaretto
    Commented 15/02/2014 às 20:39
  • 2
    Poderia disponibilizar um exemplo em um site como jsfiddle.com ou jsbin.com? Eu iria sugerir que usa margin-right: -12px /*algum número*/, mas não sei se iria funcionar. Commented 15/02/2014 às 20:44
  • Só uma pergunta: Você usa algum framework (bootstrap ou similar)? Commented 15/02/2014 às 21:39
  • Obrigado pela sugestão, @bfavaretto! Eu não pretendo reduzir o container, ele vai ser sempre da largura da página. Ajusta-se. @GustavoRodrigues, eu resolvi a situação aumentando as margens laterais do (...) li p Mas mesmo assim procurava uma solução mais razoável, uma vez que esta altera um pouco layout desejável, pois os balões afastam-se das laterais. @EdgarMunizBerlinck, não estou a usar nenhum framework. Commented 16/02/2014 às 23:15

1 Resposta 1

2

Tenta inserir overflow-x:hidden; nos elementos .chat e/ou ul.messages assim independente do elemento ultrapassar ou não o limite a barra de rolagem horizontal não vai ser mostrada.

.char, .chat ul.messages {
    overflow-x:hidden;
}
5
  • Obrigado pela resposta, Erlon! Não funciona porque aquele scroll horizontal é da página e não apenas do elemento. De qualquer forma, preferia uma solução mais direcionada ao elemento... Commented 16/02/2014 às 23:09
  • Mas com isso você removeria a influencia do elemento sobre o scroll da página. Teria como reproduzir o comportamento no jsfiddle? Commented 16/02/2014 às 23:18
  • Funcionou! Como não estava a perceber a lógica pensei que não ia resultar, mas acabei agora de testar e realmente é isto que procurava! Pode-me explicar um pouco como funciona? Porque overflow-x: hidden serve para remover o scroll horizontal, e como não chegou a aparecer um scroll não relacionei... Commented 16/02/2014 às 23:25
  • Aqui você pode ver uma rápida vídeo aula sobre esta propriedade. Commented 16/02/2014 às 23:32
  • 1
    Agora percebi como a propriedade overflow realmente funciona! Eu compreendia-a como uma propriedade que trancasse o scroll (ocultando-o neste caso) e não como uma propriedade que oculta o conteúdo mesmo. "overflow" em inglês realmente quer dizer isso, eu é que raramente uso essa propriedade que nem sabia ao certo o que fazia :D Muito obrigado ;) Commented 16/02/2014 às 23:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .