Alturas Iguais em Regiões Lado a Lado no Oracle APEX: A Solução Simples com u-flex

Você já se deparou com regiões lado a lado no Oracle APEX que têm alturas diferentes? Esse desnível visual pode deixar sua aplicação com um aspecto desalinhado e pouco profissional — especialmente quando temos várias regiões exibidas em conjunto.

Passei por isso algumas vezes e, por ser algo aparentemente simples, fui perguntar para colegas mais experientes. A resposta foi quase sempre a mesma: "tem que usar um misto de JavaScript e CSS, não dá só com CSS puro". Isso me incomodou, porque parecia uma solução complicada para um problema pequeno. Pesquisando um pouco mais, descobri o que o que precisava ser feito e vou compartilhar como fazer neste post.

Quando criamos duas regiões lado a lado com conteúdos de tamanhos verticais diferentes, o resultado pode ser como este:

Veja que existe uma diferença de tamanho entre um e outro, destacado com as setas vermelhas A diferença de altura pode causar uma quebra de harmonia visual na interface. Dependendo do layout da página, isso pode comprometer a experiência do usuário.

A solução é mais simples do que parece, e você pode aplicá-la sem precisar inspecionar elementos e inventar gambiarras.

Basta usar duas classes do Universal Theme:

• Na propriedade "Column CSS Classes" da região: adicione u-flex

• Na propriedade "CSS Classes" da região (Appearance): adicione u-flex-grow-1

Essas classes utilizam o poder do Flexbox para garantir que as regiões cresçam proporcionalmente e se ajustem à mesma altura, mesmo com conteúdos diferentes. Deixei esse screenshot aqui para mostrar onde foram aplicadas.

Isso garante que as regiões cresçam igualmente, mantendo a altura simétrica mesmo com conteúdos de tamanhos diferentes.

Exemplo:

Com u-flex e u-flex-grow-1 (abaixo): altura uniforme e layout mais equilibrado.

Experimente esse pequeno ajuste e veja a diferença que faz na apresentação da sua aplicação Oracle APEX!

Fonte:

https://apex.oracle.com/pls/apex/r/apex_pm/ut/layout-modifiers`