Tailwind "overflow-x-auto" [péssima dica!]

[Frank K Hosaka]

Ontem, eu tentei fazer um lançamento contábil pelo celular (no modo paisagem), mas na hora de eu chamar o plano de contas percebi que não consegui rolar o plano de contas para baixo, e assim eu vi que é impossível fazer o lançamento contábil pelo celular.

Eu não tive escolha, mandei todo o meu código PHP para o Copilot e pedi ajuda.

O código tem duas grandes partes. A <div> do plano de contas. E a <div> do lançamento contábil. O Copilot alterou o meu código, acrescentando <div class="overflow-x-auto"> em torno do <div> do lançamento contábil. Isso não faz o menor sentido para mim, mas isso deu certo no celular, conseguir rolar o plano de contas para baixo.

arquivo diarioLcto.php
<?php include('menuView.php') ?>
<script src="https://cdn.tailwindcss.com"></script>
<style>
    input[type="date"]::-webkit-calendar-picker-indicator { display: none}
</style>
<script>
btMenu.innerHTML='<?=$btnMenu?>'
document.title='<?=$btnMenu?>'
var idControle,Descricao
function ir(controle,destino) {
    idControle=controle
    Descricao=destino
    myModal.classList.remove('hidden')
}
function voltar(texto) {
    controle=document.getElementById(idControle)
    destino=document.getElementById(Descricao)
    controle.value=texto.substr(0,3)
    tamanho=texto.strlen
    destino.innerHTML=texto.substr(4,tamanho)
    myModal.classList.add('hidden')
}
function fechar() {
    myModal.classList.add('hidden')
}
</script>
<div class="hidden fixed ml-4 top-15 border-4 border-gray-400 rounded overflow-y-auto max-h-screen" id="myModal">
    <?php foreach($ativo as $key=>$row): ?>
    <div class="flex">
        <div class="w-[300px] pl-2 <?= $key%2==0 ? 'bg-gray-300' : 'bg-white' ?>">
            <a  onclick="voltar(this.innerHTML)"><?=$row->conta." ".$row->descricao?></a>
        </div>
        <?php if($key<$contaPassivo): ?>
            <div class="flex w-[300px] <?= $key%2==0 ? 'bg-gray-300' : 'bg-white' ?>">
                <a  onclick="voltar(this.innerHTML)"><?=$passivo[$key]->conta." ".$passivo[$key]->descricao?></a>
                <?php if($passivo[$key]->conta==415): ?>
                    <a onclick=fechar() class=ml-[100px]>Fechar</a>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    </div>
    <?php endforeach; ?>
</div>

<div class="overflow-x-auto">
<?php if(count($produtos)): ?>
    <div class="flex even:bg-gray-200">
        <div style=width:100px class=text-right>Cod</div>
        <div style=width:400px class=ml-2>Produto</div>
        <div style=width:50px class=text-right>Qt</div>
        <div style=width:50px class=text-right>Un</div>
        <div style=width:100px class=text-right>Total</div>
    </div>
    <?php foreach($produtos as $prod): ?>
    <div class="flex even:bg-gray-200">
        <div class="w-[100px] text-right text-gray-500 font-semibold">
            <a href="?Produto.alterarItem.<?=$prod->id?>">
                <?=$prod->codprod?>
            </a>
        </div>
        <div class="w-[400px] ml-2"><?=$prod->prod?></div>
        <div class="w-[50px] text-right"><?=virgula($prod->qt)?></div>
        <div class="w-[50px] text-right">
            <a href="?Produto.excluir.<?=$prod->id?>">
                <?=$prod->un?>
            </a>
        </div>
        <div class="w-[100px] text-right"><?=dec($prod->custototal)?></div>
    </div>
    <?php endforeach; ?>
    <div class="flex even:bg-gray-200">
        <div class='w-[100px] text-right'>
            <?=date('d/m/y',strtotime($produtos[0]->dia))?>
        </div>
        <div class="w-[500px] flex ml-2 white-space-nowrap">
            <form method=post action="?Diario.produto">
                <input type=submit name=produto value='Produto' 
                    class="mr-[10px] text-gray-500 font-semibold py-0 px-1
                         bg-transparent rounded-lg">
                <?php if($somaProdutos!==0): ?>
                    <a href=?Diario.pessoa class="text-gray-500 font-semibold">
                        <?=$produtos[0]->pessoa?>
                    </a>
                <?php endif; ?>
            </form>
        </div>
        <div class="w-[200px] text-end font-semibold"><?=dec($somaProdutos)?></div>
    </div>
<?php else: 
    if($btnMenu!=="Novo Lançamento"): ?>
        <div class="w-[400px] ml-2">
            <form method=post action="?Diario.produto">
                <input type=submit name=produto value='Produto' 
                    class="text-gray-500 font-semibold hover:bg-gray-200 p-1 rounded-lg">
            </form>
        </div>
    <?php endif;
endif; ?>
</div>

<form action='<?=$comando?>' method="post" class="container rounded-lg mx-auto border border-gray-200 mt-4">
    <?php if($btnMenu=="Edita Lançamento"): ?>
        <div class="py-2">
            <a href="?Diario.cria.<?=$consulta->lcto?>" class="text-gray-500 font-semibold">
                Acrescentar no lançamento <?=$consulta->lcto?></a>
        </div>
    <?php endif; ?>
    
    <div class="flex items-center bg-gray-200 mt-3 h-[35px] rounded-lg">
        <label for=dia class="block ml-2 mr-14">Dia</label>
        <input type="date" name="dia" id=dia value=<?=$consulta->dia?>
            class='w-[90px] text-gray-500 font-semibold bg-transparent border-none 
                rounded-lg p-1 py-0 text-right focus:ring-1 focus:ring-blue-700
                focus:outline-none' onclick=this.showPicker()>
    </div>
    <div class="flex items-center mt-1">
        <label for=lcto class="block ml-2 mr-16">Lçto</label>
        <input name=lcto id=lcto value='<?=$consulta->lcto?>' size=4 
            class='border-none rounded-lg text-gray-500 
                font-semibold p-1 py-0 text-right bg-transparent'>
    </div>
    <div class="flex items-center bg-gray-200 mt-1 h-[35px] rounded-lg">
        <label for=contad class="block ml-2 mr-10">ContaD</label>
        <input name=contad id=contad value='<?=$consulta->contad?>' size=4 
            onclick="ir(this.id,'DescD')" autocomplete=off
            class='border-none bg-transparent text-gray-500 font-semibold 
                rounded-lg p-1 py-0 text-right
                focus:ring-1 focus:ring-blue-700 focus:outline-none'>
        <span id="DescD" class="ml-4 "></span>
    </div>
    <div class="flex items-center mt-1">
        <label for=contac class="block ml-2 mr-10">ContaC</label>
        <input name=contac id=contac value='<?=$consulta->contac?>' size=4  
            onclick="ir(this.id,'DescC')" autocomplete=off
            class='border-none text-gray-500 font-semibold 
                rounded-lg p-1 py-0  text-right bg-transparent
                focus:ring-1 focus:ring-blue-700 focus:outline-none'>
        <span id="DescC" class="ml-4"></span>
    </div>
    <div class="flex items-center bg-gray-200 mt-1 mb-1 h-[35px] rounded-lg">
        <label for=valor class="block ml-2 mr-12 text-gray-900">Valor</label>
        <input name=valor id=valor value='<?=dec($consulta->valor)?>' autocomplete="off" 
            class='border-none text-gray-500 font-semibold bg-transparent 
                rounded-lg p-1 py-0 text-right
                focus:ring-1 focus:ring-blue-700 focus:outline-none' size=5>
    </div>
    <div class="flex items-center mt-1 mb-3">
        <label for=hist class="block ml-2 mr-3 text-gray-900">Histórico</label>
        <input name=hist id=hist value='<?=$consulta->hist?>' autocomplete="off" 
            class='border-none text-gray-500 font-semibold 
                rounded-lg p-1 py-0 bg-transparent
                focus:ring-1 focus:ring-blue-700 focus:outine:none' size=47 >
        <input type="hidden" name="docto" value="<?=$consulta->docto?>">
        <input type="submit" value="Confirmar" 
            class="border-none text-gray-500 font-semibold hover:bg-gray-200 p-1 py-0 ml-2 rounded">
    </div>
</form>

 

Editado 3 horas atrás por Frank K Hosaka

[Frank K Hosaka]

Desde ontem é que eu percebi que não consigo enxergar todo o plano de contas no celular, modo paisagem. Fazendo vários testes, descobri que o problema está aqui:

<div class="hidden fixed ml-4 top-15 border-4 border-gray-400 rounded" id="myModal">

Ao invés do fixed, usei absolute, e assim consigo rolar o plano de contas até o fim no modo paisagem, e também consigo rolar para o lado no modo retrato, no celular.

A dica <div class="overflow-x-auto">Lançamentos</div> ajuda a mostrar a maior parte do plano de contas, mas não todo.