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
?>
<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_<aqui colocar o nome do seu campo>{
width:95%;
}
#hidden_field_label_<aqui colocar o nome do seu campo>{
width:95%;
}
#hidden_field_label_<aqui colocar o nome do seu campo>{
width:95%;
}
#hidden_field_label_<aqui colocar o nome do seu campo>{
width:95%;
}
#hidden_field_label_<aqui colocar o nome do seu campo>{
width:95%;
}
#hidden_field_label_<aqui colocar o nome do seu campo>{
width:95%;
}
td.scUiLabelWidthFix{
width:95%;
}
}
/*Ajuste para não quebrar linha caso precise coloque os campos*/
#hidden_field_label_<aqui colocar o nome do seu campo se quebrar linha na label>{
white-space: nowrap;
}
#hidden_field_label_<aqui colocar o nome do seu campo se quebrar linha na label>{
white-space: nowrap;
}
.scFormHeaderFont img{
width:50%;
}
</style>
<?phpConsulta
?>
<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>
<?phpControle
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!
