Place multiple image icons on the same line in mobile view.

  • Profile Image
    APPFLOR
    Asked on April 08, 2018 at 08: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

  • Profile Image
    tina
    Answered on April 09, 2018 at 03: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 :

    https://form.jotform.com/80980839323969

  • Profile Image
    APPFLOR
    Answered on April 09, 2018 at 08:37 AM

    Bom dia.

    Vou fazer o teste.

    Obrigado


  • Profile Image
    APPFLOR
    Answered on April 09, 2018 at 08: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

  • Profile Image
    tina
    Answered on April 09, 2018 at 09: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.

  • Profile Image
    APPFLOR
    Answered on April 09, 2018 at 07: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 Pinto1523315146FORMULÁRIO.png



  • Profile Image
    BDAVID
    Answered on April 09, 2018 at 08: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. 

  • Profile Image
    APPFLOR
    Answered on April 09, 2018 at 09: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

  • Profile Image
    BDAVID
    Answered on April 09, 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. 

  • Profile Image
    APPFLOR
    Answered on April 09, 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

  • Profile Image
    tina
    Answered on April 10, 2018 at 02:52 AM

    I tried to adjust the positions of the images using Move to a New Line option which is under the Advanced tab. 

    1523342801Screen Shot 2018-04-10 at 9.45

    the result is given below:

    1523342580Screen Shot 2018-04-10 at 9.42

    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

    1523343030Screen Shot 2018-04-10 at 9.47

    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.

  • Profile Image
    APPFLOR
    Answered on April 10, 2018 at 07: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):1523361361Formulário visto do smartphob

    Não houve mudanças.

    Agradeço.

    Florisvaldo Pinto

  • Profile Image
    BDAVID
    Answered on April 10, 2018 at 08: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;

    }

    }

  • Profile Image
    APPFLOR
    Answered 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

  • Profile Image
    tina
    Answered 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. 


  • Profile Image
    APPFLOR
    Answered on April 10, 2018 at 05:28 PM

    OK, Tina.

    Aguardo

    Obrigado

  • Profile Image
    BDAVID
    Answered on April 10, 2018 at 05: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:

    1523396238result_001.png

  • Profile Image
    APPFLOR
    Answered on April 10, 2018 at 05:56 PM

    Boa noite BDAVID.

    Gostei.

    É isso mesmo.

    Agora preciso alinhá-lo

    Obrigado.

    Grande abraço.

    Florisvaldo

  • Profile Image
    Kevin_G
    Answered on April 10, 2018 at 08: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. 

  • Profile Image
    APPFLOR
    Answered on April 10, 2018 at 08: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

  • Profile Image
    APPFLOR
    Answered on April 10, 2018 at 09: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

  • Profile Image
    APPFLOR
    Answered 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

  • Profile Image
    APPFLOR
    Answered on April 10, 2018 at 11:40 PM

    Conseguimos criar.

    Obrigado.

    Grande abraço

    Florisvaldo

  • Profile Image
    tina
    Answered on April 11, 2018 at 02:01 AM

    Hello again, 

    It seems my colleagues' CSS code suggestions meet your expectation for mobile. Is the form okay now? 

    1523426490Screen Shot 2018-04-11 at 9.01

  • Profile Image
    APPFLOR
    Answered on April 11, 2018 at 07: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

  • Profile Image
    BDAVID
    Answered on April 11, 2018 at 08: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?

  • Profile Image
    APPFLOR
    Answered on April 11, 2018 at 09: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

  • Profile Image
    BDAVID
    Answered on April 11, 2018 at 09:20 AM

    So, you would like those two images to be in the same column?

    1523452762sameview.png

    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.

  • Profile Image
    APPFLOR
    Answered on April 11, 2018 at 01: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.

  • Profile Image
    BDAVID
    Answered on April 11, 2018 at 01:49 PM

    You will need to change their position in the form, example:

    1523468890move.gif

    Result:

    1523468967result_002.png

  • Profile Image
    APPFLOR
    Answered on April 11, 2018 at 03:43 PM

    Ficou ótimo.

    Conseguimos.

    Grande equipe são vocês.

    Thanks you my friend.

    Grande abraço.

    Florisvaldo