-
APPFLORAsked on April 8, 2018 at 8:00 PM
Boa noite.
Já fiz do jeito que você me instruiu, mas não deu certo.
Segue em anexo como ficou no smartphone.
Gostaria de saber se há outra maneira de fazer com que os ícones fiquem lado a lado.
Segue o link: https://form.jotformz.com/80974479181671 .
Obrigado.
Florisvaldo Pinto
-
tina JotForm DeveloperReplied on April 9, 2018 at 3:11 AM
As I understood from the other thread given below, you would like to make logos aligned side by side and my colleagues' CSS code suggestions couldn't meet your requirements.
https://www.jotform.com/answers/1438463
Maybe, you might consider merging the logos as PNG and use it in this way? Also, you may consider downloading the source code and changing the image dynamically depending on screen size using javascript.
How to get the Full Source Code of your Form
I have prepared 2 merged logo options for you and sent these images to your account email address.
You can see the demo form :
-
APPFLORReplied on April 9, 2018 at 8:37 AM
Bom dia.
Vou fazer o teste.
Obrigado
-
APPFLORReplied on April 9, 2018 at 8:46 AM
Bom dia Tina.
No caso deste link:
https://form.jotform.com/80980839323969
A Visualização que aparece é a do visualizador do formulário, mas quando vejo no smartphone, os ícones ficam enfileirados. Mas estou querendo colocá-los lado a lado para ficarem mais organizados.
Vocês já viram algum menu como o que estou fazendo enfileirados? Há possibilidade de fazer assim?
Agradeço.
Florisvaldo Pinto
-
tina JotForm DeveloperReplied on April 9, 2018 at 9:56 AM
Sorry for the inconvenience.
May I ask you to some visual examples of your expectations about the alignment of the logos on mobile view? Could you please provide us some visual examples such as screenshots, drawings etc. so we can understand your expectations and assist you more efficiently?
We will wait for your response.
-
APPFLORReplied on April 9, 2018 at 7:06 PM
Ok Tina.
Boa note.
Segue em anexo a idéia que tenho para criar o formulário e como ele seria visualizado no smartphone. Atualmente quando o formumário é visualizado no smartphone, os ícones ficam enfileirados, no entanto gostaria que os ícones ficassem lado a lado.
Aguardo.
Obrigado.
Florisvaldo Pinto
-
David JotForm Support ManagerReplied on April 9, 2018 at 8:12 PM
Is this the form in question? If it is, you would need to upload the image icons individually, because it is currently all in one image.
-
APPFLORReplied on April 9, 2018 at 9:56 PM
BDAVID boa noite.
Esta imagem que enviei é um exemplo de como estou querendo que fique no smartphone, porque atualmente os ícones ficam enfileirados na parte vertical.
Quando visualizamos no visualizador do jotform, vimos os ícones lado a lado (como estou querendo no smartphone), porem quando está no aparelho, ficam enfileirados.
A minha dificuldade é fazer com que os ícones fiquem conforme a imagem que enviei ( esta imagem criei no corel draw).
Se há possibilidade de poder colocar os ícones lado a lado quando forem visualizados no smarphone, agradeço a sua ajuda.
Este é o link do formulário que estou criando: https://form.jotform.com/80980839323969
Obrigado.
Florisvaldo Pinto
-
David JotForm Support ManagerReplied on April 9, 2018 at 11:04 PM
I believe it is possible with custom CSS code. So, please create a form example with the individual image side by side, and we can try to create a code that will make them stay side by side in mobile view.
-
APPFLORReplied on April 9, 2018 at 11:17 PM
Ok.
O formulário é este https://form.jotformz.com/80974479181671.
Os ícones são os que estão neste formulário, exceto MENU ADMINISTRATIVO e MENU CONDÔMINO. Preciso
que estes ícones fiquem lado a lado no smartphone, pois estou criando um aplicativo e assim ficariam melhor
organizados.
Obrigado
Florisvaldo Pinto
-
tina JotForm DeveloperReplied on April 10, 2018 at 2:52 AM
I tried to adjust the positions of the images using Move to a New Line option which is under the Advanced tab.
the result is given below:
Please check the demo form and do not hesitate to clone it if you need to:
https://form.jotform.com/80991496323970
How to Clone an Existing Form from a URL
you need to enable the Move to a New Line option for 1,3,5,6,8,10 and this option should be disabled for the other ones.
I hope it helps.
-
APPFLORReplied on April 10, 2018 at 7:56 AM
Bom dia Tina.
Estes procedimentos acima, já havia feito, mas como você me enviou fiz novamente, mas não obtive o resultado esperado.
O que ocorre é o seguinte: Ao criar o formulário no notebook e visualizar no pré visualizador do formulário, vimos os ícones lado a lado, porém quando visualizo no smartphone, os ícones continuam enfileirados, ou seja um em baixo do outro.
O que estamos tentando resolver é como colocar os ícones lado a lado de maneira que possa ser visualizados no smartphone.
Após ter realizado o procedimento acima, ficou assim no smartphone (segue foto abaixo):
Não houve mudanças.
Agradeço.
Florisvaldo Pinto
-
David JotForm Support ManagerReplied on April 10, 2018 at 8:42 AM
Please try injecting the following CSS code to your form, as shown on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
@media screen and (max-device-width: 40em){
#id_40,#id_43,#id_39,#id_47,#id_51,#id_48{
width: 40% !important;
}
#id_42,#id_37,#id_41{
width: 30% !important;
}
}
-
APPFLORReplied on April 10, 2018 at 10:19 AM
Bom dia BDAVID
Realizei os procedimentos que você me enviou, mas continua do mesmo jeito no smartphone. Só ficam lado a lado na visualização do formulário, mas no smartphone continua do mesmo jeito, ou seja enfileirados, com um ícone em baixo do outro.
Florisvaldo
-
tina JotForm DeveloperReplied on April 10, 2018 at 10:40 AM
I need to ask you for some time to find a solution for this issue. You will be notified via this thread as soon as possible.
Thank you for your patience and understanding in advance.
-
APPFLORReplied on April 10, 2018 at 5:28 PM
OK, Tina.
Aguardo
Obrigado
-
David JotForm Support ManagerReplied on April 10, 2018 at 5:37 PM
I have updated the code in your form to this: https://form.jotformz.com/80974479181671
@media only screen and (max-width: 480px) {
#id_40,#id_43,#id_39,#id_47,#id_51,#id_48{
width: 40% !important;
}
#id_42,#id_37,#id_41{
width: 30% !important;
}
}
Result:
-
APPFLORReplied on April 10, 2018 at 5:56 PM
Boa noite BDAVID.
Gostei.
É isso mesmo.
Agora preciso alinhá-lo
Obrigado.
Grande abraço.
Florisvaldo
-
Kevin Support Team LeadReplied on April 10, 2018 at 8:35 PM
May you please test this form and see if that's what you would like to implement on your form? https://form.jotform.com/80997407489981
If so, then you only need to replace all the CSS code currently injected and add this one instead:
@media only screen and (max-width: 590px) {
li[data-type="control_image"] {
width: 40% !important;
height: 100px;
}
}
Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
I hope this helps.
-
APPFLORReplied on April 10, 2018 at 8:57 PM
Boa noite BDAVID.
Vi que ficou muito bom.
Agora gostaria da sua ajuda para alinhar os ícones desse jeito:
MENU ADMINISTRATIVO (Ficar no Centro)
Administração Bens Patrimoniais
Agenda Normal/Regimentos
Fotos/Vídeos Portaria
MENU CONDÔMINOS (Ficar no Centro)
Portal dos Moradores CheckList
2ª Via Tx Condomínio Segurança
Agradeço.
Obrigado.
Florisvaldo
-
APPFLORReplied on April 10, 2018 at 9:45 PM
Boa noite BDAVID.
Vi que ficou muito bom.
Agora gostaria de ter ajuda para alinhar os dados (ícones) desse jeito:
MENU ADMINISTRATIVO (Centro)
Administração - (Esquerdo) Bens Patrimoniais (direito)
Agenda (Esquerdo) Normal / Regimentos (Direito)
Fotos / Vídeos (Esquerdo) Portaria (Direito)
MENU CONDÔMINOS (Centro)
CheckList (Esquerdo) Portal dos Moradores (Direito)
2ª Via Tx Condomínio (Esquerdo) Segurança (Direito)
Agradeço.
Obrigado.
Florisvaldo
-
APPFLORReplied on April 10, 2018 at 10:51 PM
Ok. Kevin_G
É isso mesmo. Os ícones ficaram corretos.
Faltaram o MENU ADMINISTRATIVO e o MENU CONDÔMINOS que não ficaram centralizados.
Obrigado
Florisvaldo
-
APPFLORReplied on April 10, 2018 at 11:40 PM
Conseguimos criar.
Obrigado.
Grande abraço
Florisvaldo
-
tina JotForm DeveloperReplied on April 11, 2018 at 2:01 AM
Hello again,
It seems my colleagues' CSS code suggestions meet your expectation for mobile. Is the form okay now?
-
APPFLORReplied on April 11, 2018 at 7:27 AM
Bom dia Tina.
Está ótimo. Exatamente como esperava.
Gostaria apenas de mudar a posição de FOTOS e VÍDEOS e PORTARIA, mudando suas posições, pois não consegui. Pronto assim ficará ótimo.
Muito obrigado à toda a equipe.
Vocês realmente são muito atenciosos.
Muito obrigado.
Grande abraço.
Florisvaldo
-
David JotForm Support ManagerReplied on April 11, 2018 at 8:35 AM
The position goes in the order you have positioned your fields. How would you like them to be positioned? Could you illustrate it with a screenshot example?
-
APPFLORReplied on April 11, 2018 at 9:10 AM
Oi BDAVID
Foi feito mais na conta diferente.
Gostaria que apenas mudasse as posições de PORTARIA e FOTOS e VÍDEOS. Ficaria um no lugar do outro e pronto.
Segue o link: https://form.jotformz.com/80974479181671
Obrigado
Florisvaldo
-
David JotForm Support ManagerReplied on April 11, 2018 at 9:20 AM
So, you would like those two images to be in the same column?
If that is correct, please add this code:
@media only screen and (max-width: 590px) {
#id_55{
width: 100% !important;
}
}
Let us know if that helps.
-
APPFLORReplied on April 11, 2018 at 1:36 PM
Não BDAVID. Ficariam um após o outro como estão os outros. Porém FOTOS e VÍDEOS primeiro e PORTARIA depois.
FOTOS e VÍDEOS (esquerda)
PORTARIA (direita)
Só mudar as posições.
Obrigado.
-
David JotForm Support ManagerReplied on April 11, 2018 at 1:49 PM
You will need to change their position in the form, example:
Result:
-
APPFLORReplied on April 11, 2018 at 3:43 PM
Ficou ótimo.
Conseguimos.
Grande equipe são vocês.
Thanks you my friend.
Grande abraço.
Florisvaldo