Autor Tópico: [resolvido] Ajuste CSS formulário para responsível (ajustar à tela)  (Lida 1920 vezes)

Rodrigo Goulart Padovezzi

  • Expert
  • *****
  • Mensagens: 1045
    • Email
Precisei de um projeto responsivo, segue o css que usei é bem simples mas sempre serve para alguma dúvida, caso sirva para alguém implementar

Todos eventos abaixo devem ser aplicados no onScriptInit

Formulário
Código: [Selecionar]
?>
<style>
.scFormPageText table{
margin: 0 auto;
}

@media (max-width:686px) {

#main_table_form{
width:95%;
                margin-left:20px;/*ajuste menu mobile pontilhado*/
    }
.sc-js-input{
width:80%;
}
#hidden_field_label_[color=red]<aqui colocar o nome do seu campo>[/color]{
width:95%;
}
#hidden_field_label_[color=red]<aqui colocar o nome do seu campo>[/color]{
width:95%;
}
        #hidden_field_label_[color=red]<aqui colocar o nome do seu campo>[/color]{
width:95%;
}
#hidden_field_label_[color=red]<aqui colocar o nome do seu campo>[/color]{
width:95%;
}
#hidden_field_label_[color=red]<aqui colocar o nome do seu campo>[/color]{
width:95%;
}
#hidden_field_label_[color=red]<aqui colocar o nome do seu campo>[/color]{
width:95%;
}
td.scUiLabelWidthFix{
width:95%;
}
}
        /*Ajuste para não quebrar linha caso precise coloque os campos*/
#hidden_field_label_[color=red]<aqui colocar o nome do seu campo se quebrar linha na label>[/color]{
        white-space: nowrap;
}
#hidden_field_label_[color=red]<aqui colocar o nome do seu campo se quebrar linha na label>[/color]{
        white-space: nowrap;
}
.scFormHeaderFont img{
width:50%;
}
</style>
<?php

Consulta
Código: [Selecionar]
?>
<style>
/*se usar quebra pode ser que a style da quebra mude, então coloque o código no onApplicationInit (apenas para grid)*/
@media (max-width:686px) {
 
    #main_table_grid{
        width:95%;
margin-left:20px;/*ajuste menu mobile pontilhado*/
   }
#main_table{
width:90%;
margin-left:20px;
  }
 }

</style>
<?php

Controle
Mesmo que o form, inclusive nome dos campos

Menu
Configuração Mobile:
Esconder o menu
   Sim
Estado inicial do menu   
   Esconder
Esconder menu ao clicar num item   
   Sim


Espero ter contribuído!
« Última modificação: Novembro 10, 2015, 07:46:05 am por Rodrigo Goulart Padovezzi »

Thyago Brasil

  • Expert
  • *****
  • Mensagens: 884
  • Crê no Senhor Jesus e será salvo tu e tua família
    • www.brasdesign.com.br
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #1 Online: Junho 08, 2015, 03:38:35 pm »
Show de bola!!! Vou testar depois!!
Valeu por compartilhar.
Thyago Brasil
Desenvolvedor Web
Site: http://www.brasdesign.com.br

SC 5.02/SC 8.1

Kleyber

  • Expert
  • *****
  • Mensagens: 2232
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #2 Online: Junho 08, 2015, 08:08:56 pm »
Muito bom Rodrigo. Por acaso tens por ai algum screenshot das telas no mobile? Principalmente consultas...
Kleyber Derick

ITIL® V3 Foundation Certified
Analista de Sistemas
São Luís - Maranhão
www.tkinformidia.net

Rodrigo Goulart Padovezzi

  • Expert
  • *****
  • Mensagens: 1045
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #3 Online: Junho 09, 2015, 09:15:25 am »
Menu Mobile


Login Tablet


Login Mobile


Login Desktop


Form Mobile

Form Desktop


Control Desktop


Control Mobile 1-2


Control Mobile 2-2

Consulta Mobile


Consulta Desktop

Jailton

  • Expert
  • *****
  • Mensagens: 2026
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #4 Online: Junho 09, 2015, 09:26:39 am »
Rodrigo parabéns, ficou perfeito nem parece SC, ehheeh

Agora sua demonstração vai servir de inspiração para o pessoal, que estava até pensando em usar outra ferramenta para fazer o mobile.
O Princípio da Vibração. "Nada está parado, tudo se move, tudo vibra". Caibalion.

Rodrigo Goulart Padovezzi

  • Expert
  • *****
  • Mensagens: 1045
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #5 Online: Junho 09, 2015, 01:38:42 pm »
Rodrigo parabéns, ficou perfeito nem parece SC, ehheeh

Agora sua demonstração vai servir de inspiração para o pessoal, que estava até pensando em usar outra ferramenta para fazer o mobile.

Valeu!

Kleyber

  • Expert
  • *****
  • Mensagens: 2232
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #6 Online: Junho 09, 2015, 07:05:29 pm »
Realmente, Rodrigo. Faço minhas as palavras do Jailton. Já dá pra pensar em algumas coisas no Mobile. Muito obrigado por compartilhar!
Kleyber Derick

ITIL® V3 Foundation Certified
Analista de Sistemas
São Luís - Maranhão
www.tkinformidia.net

Thyago Brasil

  • Expert
  • *****
  • Mensagens: 884
  • Crê no Senhor Jesus e será salvo tu e tua família
    • www.brasdesign.com.br
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #7 Online: Junho 09, 2015, 07:11:53 pm »
Muito bom!! Parabéns
Thyago Brasil
Desenvolvedor Web
Site: http://www.brasdesign.com.br

SC 5.02/SC 8.1

Celso R.

  • Expert
  • *****
  • Mensagens: 941
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #8 Online: Junho 09, 2015, 11:31:38 pm »
Rodrigo parabéns. Espero que o pessoal da NM possa se sensibilizar e implementar isso nativamente.
Celso R.
________________________________
SC - V 8

Rodrigo Goulart Padovezzi

  • Expert
  • *****
  • Mensagens: 1045
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #9 Online: Junho 10, 2015, 10:29:38 am »
Uma obs, nos formulários ao colocar o style no onScriptInit se usar evento ajax provavelmente aparecerá um output vazio.
Para evitar já desabilita em aplicação / configuração / Exibir output Ajax = Não

Kleyber

  • Expert
  • *****
  • Mensagens: 2232
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #10 Online: Junho 10, 2015, 10:37:52 am »
Blz, Rodrigo.
Kleyber Derick

ITIL® V3 Foundation Certified
Analista de Sistemas
São Luís - Maranhão
www.tkinformidia.net

Tulio

  • Intermediário
  • ***
  • Mensagens: 102
    • QQuiser
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #11 Online: Junho 13, 2015, 10:10:37 am »
Rodrigo,

Show!!!

Parabéns!!!

Abraço,

Tulio.

Gabriel Gussella

  • Iniciante
  • **
  • Mensagens: 85
    • Manager Sistemas
    • Email
Re:[resolvido] Ajuste CSS formulário para responsível (ajustar à tela)
« Responder #12 Online: Julho 27, 2015, 09:34:42 am »
Muito obrigado !!!
Manager Sistemas Ltda
www.managersistemas.com.br