-
FabioleiteAsked on May 26, 2017 at 9:00 AM
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.
-
Kevin Support Team LeadReplied on May 26, 2017 at 10:57 AM
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.
-
Kevin Support Team LeadReplied on May 26, 2017 at 11:33 AM
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.
-
FabioleiteReplied on May 26, 2017 at 12:59 PM
:) vou tentar
-
Kevin Support Team LeadReplied on May 26, 2017 at 1:40 PM
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.
-
FabioleiteReplied on May 26, 2017 at 1:43 PMAGORA É APENAS ARRUMAR O CAMPO (PRODUTO) NO LUGAR CORRETO.
[image: Imagem inline 1]
2017-05-26 12:33 GMT-03:00 JotForm :
... -
Kevin Support Team LeadReplied on May 26, 2017 at 1:53 PM
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.
-
FabioleiteReplied on May 26, 2017 at 2:43 PMPLEASE 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 :
... -
FabioleiteReplied on May 26, 2017 at 3:03 PM
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.
-
John_BensonReplied on May 26, 2017 at 4:18 PM
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.
-
FabioleiteReplied on May 27, 2017 at 6:19 PM
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?
-
Mike_G JotForm SupportReplied on May 27, 2017 at 8:49 PM
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.
-
FabioleiteReplied on May 27, 2017 at 8:57 PM
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.
-
Mike_G JotForm SupportReplied on May 27, 2017 at 9:26 PM
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.