Configurable List: How to make the widget responsive?

Gerente, me ajuda, rsrs no formato mobile, o formulário não fica perfeito, não cabe na tela do celular. o que eu faço??? me ajude. por favor.

 

segue foto em anexo.

I can see the issue is related to the field "Faça seu pedido:" which is a Configurable List widget, do note that this will require some CSS code, I will work on it and will get back to you as soon as possible. 

 

Please, inject the following CSS code to your form in order to display the widget properly in mobile devices: 

 

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

 

 

        /* Custom injected code*/

 

        th {

            display: none;

        }

 

        tr {

            display: block;

        }

 

        .col1:before, .col2:before, .col3:before, .col4:before,.col5:before {

 

            font-weight: bold;

 

            display: block;

 

        }

 

       /* naming fields */

        td.col1:before {

            content:"Produto";

        }

 

        td.col2:before {

            content:"Quant.";

        }

 

        td.col3:before {

            content:"Tam.";

        }

 

        td.col4:before {

            content:"Marca";

        }

 

        td.col5:before {

            content:"Cores";

        }

 

        /* positioning fields */

 

   td.col1 {

            display: block;

            position: relative;

            top: 3px !important;

            margin-left: 0px;

            width: 192px;

        }

 

   td.col2 {

    display: block;

    position: relative;

    top: -37px !important;

    margin-left: 140px;

    width: 192px;

}

 

        td.col3 {

            display: block;

            position: relative;

            top: -28px !important;

            margin-left: 0px;

            width: 192px;

        }

 

        td.col4 {

                display: block;

    position: relative;

    top: -126px !important;

    margin-left: 141px;

    width: 192px;

        }

 

        td.col5 {

            display: block;

            position: relative;

            top: -62px !important;

            margin-left: 0px;

        }

 

 td.col6 {

            display: block;

            position: relative;

            top: -55px !important;

            margin-left: 0px;

        }

      

 

button.add {

    margin-top: -28px;

    position: relative;

    display: block;

}

}

To inject the code, click on the widget and wizard icon, go to the Custom CSS tab and paste the given code: 

You can also see the result on this form: https://form.jotform.com/71454538541963 

Hope this helps. 

:) vou tentar

Your last comments did not reach this thread, but I received them in my email. 

FALTA APENAS ESSE DETALHE. O CAMPO (PRODUTO) ESTA MUITO PERTO DO CAMPO (QUANT.)

Please, on the given code, replace the CSS for the "td.col2" and "td.col4" with the corresponding code below: 

td.col2 {

    display: block;

    position: relative;

    top: -37px !important;

    margin-left: 160px;

    width: 192px;

}

td.col4 {

    display: block;

    position: relative;

    top: -126px !important;

    margin-left: 160px;

    width: 192px;

}

This way the fields are separated a bit and still displayed aligned. 

Hope this helps. 

AGORA É APENAS ARRUMAR O CAMPO (PRODUTO) NO LUGAR CORRETO.
[image: Imagem inline 1]
2017-05-26 12:33 GMT-03:00 JotForm :
...

Unfortunately, your image did not reach this thread, could you please try to upload it following the steps on this guide: How-to-add-screenshots-images-to-questions-in-support-forum

Also, may we know the device you're testing on? 

This will help us to test on the same device as well and view the layout you're seeing. 

We will wait for your response. 

PLEASE SEND ME THE ENTIRE CODE AGAIN, I TRIED TO JOIN THE CODES, BUT THE
SITUATION WAS WORSE. FOR GENTILEZA, SEND OR COD. CSS COMPLETE, NOT TO HAVE
ANY ERROR, BECAUSE I AM LAY IN THIS SUBJECT CODE, SEE HOW IT WAS ALL WRONG
MY FORM ... AGUARDO. T +
2017-05-26 14:53 GMT-03:00 JotForm :
...

ok. vc pode me mandar o codigo completo perfeito? eu tente juntar os codigos, mas nao deu muito certo, por favor me envia ele pronto só pra colar por favor. que em seguida ja quero enviar o formulario para meus clientes acessarem. grato.

 

OK. Can you send me the perfect complete code? I tried to join the codes, but it did not work out very well, please send me it ready just to paste please. Which then I want to send the form for my clients to access. Grateful.

You can clone the form of my colleague that he provided so you can check the custom CSS code, here's the link: https://form.jotform.com/71454538541963. 

Here's the guide to cloning a form: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

Here's a screen animation guide to copy the custom CSS code:

We can't view the image or screenshot you're trying to share. Please follow this guide on how to add an image to the Support Forum:

1. Log in to your account.
2. Click this link: https://www.jotform.com/answers/1155502
3. Scroll down and click the Image/Edit image button and select the image you want to share. 

We'll wait for your response. Thank you.

 

Amigos me manda o codigo pra arrumar a versao mobile. estou usando um samsung s7

segue a foto em anexo. veja como esta com defeito em meu celular.

por favor preciso do codigo completo, no jeito de copiar e colar. completo. ok?

We appreciate you providing a screenshot of how the form looks like in your form. In order for me to further help you, I have created a clone version of your form to my account. In the screenshot below, notice that we both got the same outcome.

I also created a clone version of my colleague's form in my account and tested it.

Notice that it shows perfectly on the same device.

However, when I copied the Custom CSS codes of the Configurable List widget in the clone version of my colleague's form to the Custom CSS tab of the Configurable List widget in the clone version of your form after removing the existing custom CSS there, I got what is shown in the image below:

Notice that the Producto drop-down field is longer it reached the Quantidade Number field.

That is happening because the texts of the options of the drop-down field in my colleague's form are shorter than what is in your form.

To fix the issue, I have made just a few changes with the Custom CSS codes that my colleague used in his form.

Then, I applied it to the clone version of your form.

You can find the CSS codes in this link: https://pastebin.com/RQYtXA7G

and here is the clone version of your form with the new CSS codes: https://form.jotformpro.com/71468252590965

Result:

I hope this helps. If you still weren't able to get it fixed on your end, please let us know. Also, may we ask your permission to apply the changes directly to your form to help you?

Thank you.

 

The work of you is aplausivo, inda more on a Saturday night, rsrs addicted to work? Or just like helping people? PLEASE PLACE NEW CODE IN MY FORM. YOU HAVE MY AUTHORIZATION NOW AND ALWAYS. PLEASE PLACE FOR ME, THIS IS AUTHORIZED ... SO I WILL FEEL SAFER. GRATO ... VERY GRATEFUL.

You are most welcome!

We appreciate you granting us permission to make changes to your form. With that, I was able to apply the necessary CSS codes to fix the issue you are having.

If you have any further questions, please do not hesitate to contact us again anytime.

Thank you.