A gambiarra do &nbsp

Frank K Hosaka · Novembro 15

Estou estudando Tailwinds com o Copilot, estou aprendendo a usar o marcador <div>.

Para colocar uma <div> em cima da outra, você não precisa fazer nada.

Para colocar uma <div> do lado da outra, aí você precisa usar <div class="flex">.

Para colocar diferentes números de <div> em cada linha, aí você precisa usar <div class="flex flex-wrap">. O problema é alinhar as colunas. O Tailwinds tem ótimas ferramentas para fazer ajustes, do tipo margem negativa. Isso é uma grande maravilha, desde que a linha não seja sombreada. O Copilot ofereceu uma sugestão, mas o código iria ficar enorme. Eu resolvi apelar para a velha gambiarra do &nbsp. Mas eu tive que usar 7 &nbsp. Na internet encontrei a sugestão do &ensp, ele é maior que o &nbsp:

arquivo outrosView.blade.php
@include('menuView')
<script>
    btmenu.innerHTML = 'Outros';
    document.title = "Outros";
</script>

<div class="px-2 bg-gray-200"><a href="estoqueBaixar">Baixar Estoque</a></div>
<div class=px-2><a href="balanceteTBW">Criar tbw</a></div>
<div class="px-2 bg-gray-200"><a href="produtoDescontinuar">Descontinuar Produto</a></div>
<div class=px-2><a href="estoqueDiferenca">Diferença no Estoque</a></div>
<div class="px-2 bg-gray-200"><a href="blingDiferenca">Diferença na Bling</a></div>
<div class=px-2><a href="estoqueEntrada">Entrada de Produtos</a></div>
<div class="px-2 bg-gray-200"><a href="outrosMegaSena">Mega-Sena</a></div>
<div class=px-2><a href="estoqueNota">Nota do Fornecedor</a></div>
<div class="px-2 bg-gray-200"><a href="blingFalta">Nota Faltante</a></div>

<div class="flex flex-wrap">
    <div class="w-1/2 px-2">session('codp')</div>
    <div class="w-1/2">{{$sessao['codp']}}</div>
    <div class="w-1/2 px-2 bg-gray-200">session('pessoa')</div>
    <div class="w-1/2 bg-gray-200">{{$sessao['pessoa']}}</div>
    <div class="w-1/2 px-2">session('criterio')</div>
    <div class="w-1/2">{{$sessao['criterio']}}</div>
    <div class="w-1/2 px-2 bg-gray-200">session('criterioPessoa')</div>
    <div class="w-1/2 bg-gray-200">{{$sessao['criterioPessoa']}}</div>
    <div class="w-1/2 px-2">session('dia')</div>
    <div class="w-1/2">{{dbr($sessao['dia'])}}</div>
    <div class="w-1/2 px-2 bg-gray-200">session('end')</div>
    <div class="w-1/2 bg-gray-200">{{$sessao['end']}}</div>
    <div class="w-1/2 px-2">session('id')</div>
    <div class="w-1/2">{{$sessao['id']}}</div>
    <div class="w-1/2 px-2 bg-gray-200">session('lcto')</div>
    <div class="w-1/2 bg-gray-200">{{$sessao['lcto']}}</div>

    <div class="w-1/3 px-2">env('lctoBaixaEstoque')</div>
    <div class="w-1/3 text-center ml-4">{{$baixa}}</div>
    <div class="w-1/3 text-right text-red-500 -ml-4"> {{dec($valorBaixa)}}</div>
    <div class="w-1/3 px-2 bg-gray-200">env('lctoAcertoMais')</div> 
    <div class="w-1/3 text-center bg-gray-200">&ensp;&ensp;&ensp;&nbsp;{{$mais}}</div>
    <div class="w-1/3 text-right text-red-500 bg-gray-200">{{dec($valorMais)}}</div>
    <div class="w-1/3 px-2 ">env('lctoAcertoMenos')</div>
    <div class="w-1/3 text-center ml-4">{{$menos}}</div>
    <div class="w-1/3 text-right text-red-500 -ml-4">{{dec($valorMenos)}}</div>
    <div class="w-1/2 px-2 bg-gray-200">env('diaAcerto')</div>
    <div class="w-1/2 bg-gray-200">{{dbr($diaAcerto)}}</div>
</div>

marcospets · Dezembro 12

Faz tempo que não programava, vim ver na novidades e ver o que mudou, sabe vi vários posts seus, mas vejo você tentando inventa a roda.

É só minha opinião, mas isso é algo de várias pessoas hoje, essa gambiarra de &ensp feio.

Frank K Hosaka · Quinta às 20:27

4 horas atrás, marcospets disse:

Faz tempo que não programava, vim ver na novidades e ver o que mudou, sabe vi vários posts seus, mas vejo você tentando inventa a roda.

É só minha opinião, mas isso é algo de várias pessoas hoje, essa gambiarra de &ensp feio.

Eu ainda não sei fazer a roda, você tem o tutorial, de preferência em PHP?

marcospets · Quinta às 22:33

2 horas atrás, Frank K Hosaka disse:

Eu ainda não sei fazer a roda, você tem o tutorial, de preferência em PHP?

Desculpa caso tenha parecido ofensivo, eu estava fazendo no celular com um editor online, mas travou a página.

Talvez o jeito que escrevi você pode ter interpretado errado.

Eu não sei exatamente como está sendo formado esses dados vou julgar a print e div.

Fazer uma div contêiner (alinhamento ao topo), uma div LINE width 100% e dentro dela 3 divs, 33% cada, os dados que você apresentou acima colocar em um array.

Vai fazer um for ($i; $i<count(array); $i++) dentro um If que se $i % 0 class background-color: white else background-color: grey, chamado dentro da div

Espero que seja possível decifrar o que escrevi.

O for vai contratar os dados até o final e o If é só para color branco e cinza.

Edit:

Eu pensei assim para no caso de não ser uma array e sim as colunas fossem preenchidas com informações de um dB, não ia precisa mexer o código, digo isso porque ali você citou cada div com dados um por um da coluna 1.

Edit 2:

Uma Tabela XPO, 3 colunas (id, coluna1, coluna2, coluna3)

Conecta base e faz o que expliquei ali em cima, até o for pode excluir e simplificar mais ainda, com umas 20 linhas fica bonito

Editado Quinta às 22:52 por marcospets

Frank K Hosaka · Sexta às 07:09

8 horas atrás, marcospets disse:

Desculpa caso tenha parecido ofensivo, eu estava fazendo no celular com um editor online, mas travou a página.

Talvez o jeito que escrevi você pode ter interpretado errado.

Eu não sei exatamente como está sendo formado esses dados vou julgar a print e div.

Fazer uma div contêiner (alinhamento ao topo), uma div LINE width 100% e dentro dela 3 divs, 33% cada, os dados que você apresentou acima colocar em um array.

Vai fazer um for ($i; $i<count(array); $i++) dentro um If que se $i % 0 class background-color: white else background-color: grey, chamado dentro da div

Espero que seja possível decifrar o que escrevi.

O for vai contratar os dados até o final e o If é só para color branco e cinza.

Edit:

Eu pensei assim para no caso de não ser uma array e sim as colunas fossem preenchidas com informações de um dB, não ia precisa mexer o código, digo isso porque ali você citou cada div com dados um por um da coluna 1.

Edit 2:

Uma Tabela XPO, 3 colunas (id, coluna1, coluna2, coluna3)

Conecta base e faz o que expliquei ali em cima, até o for pode excluir e simplificar mais ainda, com umas 20 linhas fica bonito

Não se trata de um laço for, cada linha representa um link, ou uma informação. O problema é que a informação precisa de dois ou três <div>, mas eu não consegui alinhar as <div> onde eu queria, assim apelei para a gambiarra.

Muito tempo depois de eu publicar o código, descobri que o CSS Tailwind tem o width em pixels, e assim eu não preciso mais da gambiarra:

arquivo outrosView.blade.php
@include('menuView')
<script>btmenu.innerHTML='Outros';document.title="Outros"</script>
<div class="bg-gray-200"><a href=estoqueBaixar>Baixar Estoque</a></div>
<div><a href=balanceteTBW>Criar tbw</a></div>
<div class="bg-gray-200"><a href=produtoDescontinuar>Descontinuar Produto</a></div>
<div><a href=estoqueDiferenca>Diferença no Estoque</a></div>
<div class="bg-gray-200"><a href=blingDiferenca>Diferença na Bling</a></div>
<div><a href=estoqueEntrada>Entrada de Produtos</a></div>
<div class="bg-gray-200"><a href=outrosEtiqueta>Etiquetas</a></div>
<div><a href=outrosMegaSena>Mega-Sena</a></div>
<div class="bg-gray-200"><a href=diarioMercado>Mercado Pago</a></div>
<div><a href=nfInicio>Nota do Fornecedor</a></div>
<div class="bg-gray-200"><a href=blingFalta>Nota Faltante</a></div>
<div class=flex>
    <div class=w-[200px]>session('codp')</div>
    <div>{{$vetor['codp']}}</div>
</div>
<div class="flex bg-gray-200">
    <div class=w-[200px]>session('codprod')</div>
    <div>{{$vetor['codprod']}}</div>
</div>
<div class="flex">
    <div class=w-[200px]>session('criterio')</div>
    <div class=truncate>{{$vetor['criterio']}}</div>
</div>
<div class="flex bg-gray-200">
    <div class=w-[200px]>session('criterioPessoa')</div>
    <div>{{$vetor['criterioPessoa']}}</div>
</div>
<div class="flex">
    <div class=w-[200px]>session('dia')</div>
    <div>{{dbr($vetor['dia'])}}</div>
</div>
<div class="flex bg-gray-200">
    <div class=w-[200px]>session('end')</div>
    <div>{{$vetor['end']}}</div>
</div>
<div class="flex">
    <div class=w-[200px]>session('id')</div>
    <div>{{$vetor['id']}}</div>
</div>
<div class="flex bg-gray-200">
    <div class=w-[200px]>session('lcto')</div>
    <div>{{$vetor['lcto']}}<td></div>
</div>
<div class="flex">
    <div class=w-[200px]>session('pessoa')</div>
    <div>{{$vetor['pessoa']}}</div>
</div>
<div class="flex bg-gray-200">
    <div class=w-[200px]>env('lctoBaixaEstoque')</div>
    <div class=w-[100px]>{{$baixa}}</div>
    <div class='text-red-600 text-right'>{{dec($valorBaixa)}}</div>
</div>
<div class="flex">
    <div class=w-[200px]>env('lctoAcertoMais')</div>
    <div class=w-[100px]>{{$mais}}</div>
    <div class='text-red-600 text-end'>{{dec($valorMais)}}</div>
</div>
<div class="flex bg-gray-200">
    <div class=w-[200px]>env('lctoAcertoMenos')</div>
    <div class=w-[100px]>{{$menos}}</div>
    <div class='text-red-600 text-right'>{{dec($valorMenos)}}</div>
</div>
<div class="flex">
    <div class=w-[200px]>env('diaAcerto')</div>
    <div>{{dbr($diaAcerto)}}</div>
</div>

Editado Sexta às 07:11 por Frank K Hosaka

Entrar

A gambiarra do &nbsp

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

marcospets

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

marcospets

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades