Fixar Cabeçalho do Formulário Google Sheets Apps Script - Aula 05

Fixar Cabeçalho do Formulário Google Sheets Apps Script - Aula 05 Show de bola pessoal ficou mais estiloso o nosso formulá e agora quando tiver mais registros o cabeçalho da tabela HTML vai ficar fixo e também o cabeçalho do.

Fixar Cabeçalho do Formulário Google Sheets Apps Script - Aula 05

Formulário Neste vídeo nós vamos fazer uns ajustes no nosso projeto nós vamos fixar o cabeçalho dos formulários de filtro e também do formulário de relatório beleza pessoal então vamos.

Para o editor de script no editor acessem o arquivo for filtro clientes P HTML e antes na Label data 1 nós vamos inserir uma div então menor objeto div.

ID igual e abre e fecha aspas duplas eu vou chamar esta div de div cabecalho fora das aspas duplas maior vocês vão fechar esta div antes da div tabela menor barra div e.

Fecha com uma maior próximo passo é definir o estilo desta div copia o ID da div e acessa o arquivo estilo filtro clientes P HTML e depois da referência ao corpo do.

Formulário nós vamos colocar jogo da velha ID da div e abre e fecha Chaves e dentro das chaves comando position dois pontos Fix set ponto e vírgula cor de preenchimento background.

Traço color dois pontos espaço jogo da velha e vocês vão colocar 00 FF FF Esta é a definição da cor azul fraco em HTML e ponto e.

Vírgula largura da div Comando Wi dois pontos 10000 pixels ponto e vírgula altura comando re 2is pontos 120 pixels ponto e.

Vírgula distância do Topo dois p z0 Piel ponto e vírgula distância da esquerda left do pontos 0 Pixel ponto e vírgula e nós.

Vamos colocar também a propriedade Z tro index dois pontos 100 ou seja esta div vai ficar na frente de até 100 objetos no nosso formulário e fecha a linha de código com.

Ponto e vírgula definido o estilo da div agora nós precisamos fazer uns ajustes na tabela então vocês vão descer até localizar os códigos de definição de.

Estilo da tabela html Tab propriedade left nós vamos colocar 0 Piel e também Vamos definir a propriedade Z index do pontos z0 ou seja.

Veja Também:

    A tabela vai ficar atrás de todos os

    Objetos e fech a linha de código com ponto e vírgula eu quero também definir o estilo do cabeçalho da tabela.

    HTML e fixar o cabeçalho da tabela Então antes da referência a caixa msg nós vamos colocar jogo da velha ID da tabela que é Tab e o comando terit para entrar no cabeçalho da.

    Tabela abre fecha Chaves e pressiona enter e dentro das chaves comando position dois pontos e aí vocês vão colocar o comando Stick Stick ponto e.

    Vírgula cor de preenchimento background traço color dois pontos espaçoo da 2 F4 F4 F Esta é a definição da cor cinza.

    Escuro e fecha a linha de código com ponto e vírgula e eu também quero definir a cor do texto propriedade color dois pontos jogo da velha e agora vocês vão.

    Colocar deixa-me ver quantos FS são seis FS pessoal 1 2 3 4 5 6 Esta é a definição da cor branca em HTML ponto e vírgula distância do Topo dois pontos.

    120 pixels e ponto e vírgula e tem mais um ajuste que nós precisamos fazer na tabela no arquivo forme filtro clientes ponto HTML localiza a tabela e agora nós vamos.

    Colocar 100% para a largura salva as alterações e vamos testar para ver se alterou o cabeçalho do nosso.

    Formulário show de bola pessoal ficou mais estiloso o nosso formulário e agora quando ti mais regos o cabeç daab HTML vai ficar fixo e também o cabeçalho do.

    Formulário Beleza ajustamos o formulário

    De filtro referente aos registros dos clientes agora nós vamos ajustar o formulário de filtro referente aos pedidos volta no editor para facilitar.

    Pessoal nós vamos copiar os códigos de estilo da div cabeçalho copia e agora vocês vão acessar o arquivo Deixa me ver onde está o filtro.

    Relatório filtro pedidos P HTML primeiro nós vamos colocar a div cabecalho antes da Label data 1 menor objeto div ID igual e abre e fecha aspas duplas.

    Div cabecalho fora das aspas duplas e vocês vão fechar a div mesmo esquema antes da div tabela menor e fecha com maior e já podem.

    Ajustar a largura da tabela HTML para 100% feito estes ajes agora nós vamos definir o estilo da div cabecalho então acessem o arquivo estilo.

    Filtro pedidos pon HTML depois da referência ao corpo do formulário Cola os códigos de estilo e agora nós vamos alterar a cor de preenchimento da div.

    Cabecalho agora vai ser jogo da velha em 22 8 B 22 Esta é a definição da cor verde forte largura e altura continua igual.

    Distância do Topo igual distância da esquerda também Z index continua 100 próximo passo é ajustar a tabela HTML então Então agora vocês vão procurar pelos códigos de definição de.

    Estilo da tabela vamos ver os botão de comando Tab então a distância da esquerda vai ser zer zer Pixel e a propriedade Z traço index do.

    Pontos ser zero e ponto e vírgula e nós precisamos definir também o estilo do cabeçalho da tabela HTML então jogo da velha ID da tabela que no meu caso é Tab comando terit para.

    Entrar no cabeçalho abre e fecha Chaves e pressiona enter e dentro das chaves comando position dois pontos comando ponto e.

    Vírgula background traço color cor de preenchimento dois pontos espaço jogo da velha e vocês vão colocar 2 F4 f4f ponto e vírgula cor do texto.

    Propriedade color dois pontos vai ser jogo da velha e sefs FF aqui está eu já tenho esta definição cor branca ponto e vírgula distância do.

    Topo dois pontos vai ser 120 pixels ponto e vírgula e neste formulário pessoal tem mais um detalhe eu vou colocar a última linha da tabela HTML em que é a.

    Linha da somatória Total então jogo da velha ID da tabela Tab TR dois pontos comando L tro.

    Shield abre e fecha Chaves e pressiona enter e dentro das chaves propriedade fonte traço w dois pontos comando bol para ponto e vírgula e eu quero alterar.

    Também tamanho da fonte então propriedade fonte traço si dois pontos 15 piels e ponto e vírgula salva as alterações e vamos.

    Para ver se o cabeçalho ficou posicionado corretamente show de bola pessoal já temos o cabeçalho do formulário em verde e alteramos também o estilo do cabeçalho.

    Da tabela HTML Vamos carregar registros para ver esta coluna pessoal do preço unidade nós podemos ajustar esse texto Vamos diminuir para p p.

    Ponto fecha o formulário volta no editor e acessa o arquivo filtro pedidos P HTML procura pela tabela coluna preço unidade e deixem apenas p p ponto salva as.

    Alterações e vamos testar novamente para ver se ficou correto reduzindo o texto deixar limpar filtrar Agora sim pessoal acredito que fica melhor desta forma ajustamos o formulário de filtro.

    Referente aos pedidos agora nós vamos ajustar o formulário de relatório podem fechar o formulário volta no editor e novamente para facilitar vamos.

    Reaproveitar os códigos de estilo da div cabecalho copia os códigos de estilo e acessem o arquivo relatório html.

    E antes da Label ano nós vamos inserir A div então menor objeto div ID igual e abre e fecha aspas duplas div precisa ser o mesmo nome di cabecalho fecha com maior e vocês vão.

    Fechar esta div vai ser antes antes da taba també então menor barra div e fecha com maior e a largura da tabela nós vamos ajustar para.

    100% feito estes ajustes acessem o arquivo estilo relatório P HTML e cola os códigos de estilo e agora nós vamos Vamos alterar a cor de preenchimento para jogo da velha.

    99 32 CC Esta é a definição da cor roxa em HTML feito este ajuste agora nós Precisamos ajustar a tabela HTML Então nós vamos descer até.

    Localizar os códigos de estilo da tabela HTML botão de comando localiza a referência a Tab distância da esquerda z0 Piel propriedade Z tro index 2 p 0 e ponto e.

    Vírgula feito este ajuste agora nós vamos definir o estilo do cabeçalho da tabela Então antes da referência a caixa msg vocês vão colocar jogo da velha ID da tabela.

    AVISO LEGAL: Toda a responsabilidade do conteúdo e autoria deste vídeo transcrito, é do produtor do canal. Clique no Link do Vídeo: https://www.youtube.com/watch?v=Q0H0N3u6OLY

Postar um comentário

Post a Comment (0)

Postagem Anterior Próxima Postagem