Ir para o conteúdo principal

Overflow

As classes utilitárias de overflow do WPF controlam como o conteúdo excedente de um elemento é tratado, permitindo gerenciar a visibilidade e o comportamento de rolagem em elementos com dimensões limitadas. Elas são ideais para layouts com contêineres, modais ou áreas de conteúdo restritas.

Como Funcionam as Classes de Overflow

As classes de overflow seguem uma sintaxe intuitiva que permite definir o comportamento geral ou por eixo (x ou y), com ou sem tipo específico (hidden, scroll, visible). O padrão overflow sem modificadores aplica overflow: auto; como valor padrão.

Regras CSS Geradas

As classes são traduzidas diretamente para propriedades CSS. Veja alguns exemplos:

  • overflow → overflow: auto;

  • overflow-x → overflow-x: auto;

  • overflow-y-hidden → overflow-y: hidden;

  • overflow-scroll → overflow: scroll;

Como Usar

As classes de overflow são aplicadas a elementos com dimensões definidas (ex.: width, height, max-width, max-height) para controlar o comportamento do conteúdo que excede essas dimensões. Elas são úteis para criar áreas roláveis, ocultar conteúdo excedente ou manter visibilidade.

Exemplo 1: Overflow Padrão

Aplica rolagem automática para conteúdo excedente em ambas as direções:

<div class="w-300px h-200px overflow">
  <p><!-- Conteúdo longo que excederá o contêiner... --></p>
</div>

Exemplo 2: Overflow por Eixo

Habilita rolagem horizontal, mas oculta o conteúdo vertical excedente:

<div class="w-300px h-200px overflow-x overflow-y-hidden">
  <p><!-- Conteúdo longo horizontalmente e verticalmente... --></p>
</div>

Exemplo 3: Overflow com Tipo Específico

Cria uma área com rolagem vertical forçada e conteúdo horizontal visível:

<div class="w-300px h-200px overflow-y-scroll overflow-x-visible">
  <p><!-- Conteúdo com rolagem vertical e visibilidade horizontal... --></p>
</div>

Exemplo 4: Combinação com Posicionamento

Usa overflow com classes de posicionamento e centralização:

<div class="relative w-100% h-400px overflow-hidden">
  <div class="absolute center(c) w-200px h-200px overflow-y-scroll">
    <p><!-- Conteúdo rolável centralizado... --></p>
  </div>
</div>

Dicas

  • Dimensões: Sempre defina width, height, max-width ou max-height no elemento para que o overflow funcione corretamente.

  • Rolagem Automática: Use overflow ou overflow-(x|y) para rolagem apenas quando necessário.

  • Combinações: Combine com classes de posicionamento (absolute, relative, etc.) e offsets (top, left, etc.) para layouts complexos.

  • Tipos: Escolha hidden para ocultar conteúdo, scroll para rolagem forçada ou visible para manter o conteúdo visível sem rolagem.

Notas

  • As classes overflow-x e overflow-y são úteis para controle granular em layouts responsivos.

  • O valor visible pode causar sobreposição de conteúdo fora do contêiner, então use com cuidado.

  • Para áreas roláveis, certifique-se de que o contêiner tenha conteúdo suficiente para ativar a rolagem.

Voltar ao topo