-
plungefetish1Asked on August 14, 2019 at 12:53 PM
When I view my form https://www.jotform.com/build/91707648718166 on a mobile phone in portrait view my DDslick widgets ( Unique names: airTrans and PayOps ) extend past the right edge of the screen.
How can I adjust them so that they will stay within the screen?
-
John Support Team LeadReplied on August 14, 2019 at 2:29 PM
You can try adjusting its width by injecting a custom CSS code. Could you please try using this code below and see if this resolves the issue?
@media screen and (max-width: 480px), screen and (max-device-width: 767px){
.dd-options,.dd-select,.dd-selected{
width:250px!important;
}
}
Please follow this guide on How-to-Inject-Custom-CSS-Codes.
-
plungefetish1Replied on August 15, 2019 at 4:43 PM
That did not work. I injected the css but it still does the same thing
-
John Support Team LeadReplied on August 15, 2019 at 4:48 PM
Let me have some time to run a few tests with your form so I could figure out the right CSS code to use. I will get back to you on this thread shortly.
-
plungefetish1Replied on August 16, 2019 at 8:50 AM
Have you had a chance to look at this?
-
Richie JotForm SupportReplied on August 16, 2019 at 9:19 AM
Kindly add this custom CSS inside your ddSlick Dropdown widget custom CSS
@media screen and (max-width: 480px){
.dd-options,.dd-select,.dd-selected{
width:270px!important;
}The custom CSS code would work for both widgets.
Please give it a try and let us know if the issue still remains.
-
plungefetish1Replied on August 16, 2019 at 10:35 AM
It does work but it is not responsive. It is stuck in the smaller size. In the desk top mode I would like it to be as wide as the other elements.
-
Richie JotForm SupportReplied on August 16, 2019 at 10:51 AM
My apologies, it seems the media query code I have shared doesn't work that is why the size changed even if you're not using mobile.
Kindly try this code instead:
@media (max-width: 480px)
{
.dd-options,.dd-select,.dd-selected{
width:250px!important;
}
}You may add this code to your Form Designer CSS.
Please follow this guide on How-to-Inject-Custom-CSS-Codes.
-
plungefetish1Replied on August 16, 2019 at 12:33 PM
It did not work.
I injected it into this form
https://www.jotform.com/build/91707648718166
and I got the same results!
-
plungefetish1Replied on August 16, 2019 at 7:36 PM
Should I start this question thread again? my question has not been answered
-
John Support Team LeadReplied on August 16, 2019 at 7:56 PM
Could you please try this code below. Inject it to both the DropDown widgets you have on the form:
@media only screen and (max-width: 400px) {
.dd-options,.dd-select,.dd-selected {
width:310px!important;
}
Here's how it looks on mobile:
-
plungefetish1Replied on August 20, 2019 at 6:37 PM
I still need help!
I injected it into both ddslick widgets.
The Airport transfers widget works now.
The reserve your room widget is still running off the page on my Iphone.
Here is the form URL https://form.jotform.com/92263485568166
-
AshtonPReplied on August 20, 2019 at 8:37 PM
Hello @plungefetish1, I can replicate the issue on my end. I am working on a custom CSS that should resolve the issue. I will get back to you soon