-
jaiswal78Asked on October 5, 2015 at 4:25 AM
In my form, there is another issue which have come up regarding responsiveness - for which I will raise another topic. This issue of this thread can be closed.
-
beril JotForm UI DeveloperReplied on October 5, 2015 at 4:53 AM
Hi,
If I understood your question correctly. I see that your form is responsive from my side.
Can you copy and paste the code below to your CSS from Designer?
/*-----------RESPONSIVE LAYOUT-----------*/
.form-line.form-line-column {
width: 100% !important;
margin-left:0
}
.form-line{
width: 100%;
}
.form-textarea,
.form-textbox,
.form-dropdown{
width: 100% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-label-left, .form-label-right{
width: auto !important;
}
.form-buttons-wrapper{
margin-left:0 !important;
}
.form-input {
width: 100% !important;
}
.form-all{
width: 75% !important;
}
.form-sub-label-container {
width: 100% !important;
display: block !important;
}
Here is how to do this:
1) Click on Setup & Embed.
2) Click on Designer.
3) Click on CSS.
4) Copy & paste the code above to CSS.
5) Click on save button.
Hope this will help. Let us know if you need further assistance.
-
jaiswal78Replied on October 5, 2015 at 6:16 AM
Hi Beril,
Thanks for your answer, but this have not helped me. In the form the options are still coming in one row and the user will have to scroll sideways to see all the options. Please see the attached screenshot.
I would like that those options which are not able to come in the width of the screen should convert to row and come down, so that the user will have to scroll only vertically and not side ways. (see below modified image of this screenshot.
-
beril JotForm UI DeveloperReplied on October 5, 2015 at 8:53 AM
Hi,
Unfortunately, I see that, with this widget, images are not align top to bottom on mobile phone.
I forwarded it to our developers and we will inform you as soon as possible, when we solve the problem.
If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.
-
TitusNReplied on October 6, 2015 at 2:00 AM
Hello,
Please try the Mobile Responsive Widget. It will help resolve the mobile responsiveness automatically for most fields:
Also - try using a wider margin for your buttons (15%):
Here's a copy of your form - http://form.jotformpro.com/form/52781456680968? - its not perfect, but its a good start - right?
Let us know.
-
TitusNReplied on October 6, 2015 at 2:25 AM
Oops - I also re-added your CSS custom Code for animating the color and adding the circular border right below the 15% border declaration:
.images_button_container {
display:inline-block;
box-sizing:border-box;
}
li div.default, li div.active {
background-repeat: no-repeat !important;
background-position: center !important;
margin: 5px 64px;
}
li div.default{
padding: 20%;
background-size: 75% 75% !important;
-webkit-border-radius: 50px;
border: 1px solid #000000;
}
li div.active{
background-color: #fec11f !important;
padding: 25%;
background-size: 80% 80% !important;
-webkit-border-radius: 12px;
border: 0px solid #000000;
}
Let us know if this helps.
http://form.jotformpro.com/form/52781456680968?
Thanks
-
jaiswal78Replied on October 7, 2015 at 4:48 AM
Hi,
Thanks for your support. It worked.
-
CharlieReplied on October 7, 2015 at 9:38 AM
In behalf of my colleagues, you are welcome.
Should you need any assistance again, please do not hesitate to open a new thread here in the forum.
Thank you.
-
beril JotForm UI DeveloperReplied on October 8, 2015 at 4:10 AM
Hi,
I am happy to hear that, the problem is solved.
If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.