New Form Layout: how to remove vertical and horizontal scrollbars.

  • Profile Image
    Gobooth
    Asked on November 29, 2017 at 09:08 PM

    Hi Guys, 

    I need help.


    I can't figure out how to properly use your form builder, can you beleive I've been working on this 1 form for more than 4 months and it's still not ready?  wtf.


    so I'm in the builder, and it looks great, however, when it's live on my website, it doesn't look the same (I'm talking about Desktop, don't even get me started with the mobile version)


    there's something fundamental I'm not getting with the width adjustment.


    I would like to send you 2 pictures... but your system won't let; so I took a screenshot of my screenshots: the 1 on top is how it looks on my website, and at the bottom, it's how it looks on the builder.

    How can I get rid of that vertical scrollbar?


    Thanks in advance


    Dan

  • Profile Image
    Nik_C
    Answered on November 30, 2017 at 03:58 AM

    I checked your website, but I don't see vertical scrollbar (or horizontal) in the form, there is only one and that is the webpage:

    1512031418screencast.gif

    Unfortunately, there is no much room for adjusting the form's width and height there.

    You could only try adjusting the width and height of the iFrame itself:

     <iframe id="JotFormIFrame-72333471388258" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/Gobooth/gobooth-rental-form" frameborder="0" style="width: 980; height:539px; border:none;" scrolling="no"> </iframe>

    You can adjust and use the above iFrame code to embed your form.

    Let us know if you need further assistance.

    Thank you!


  • Profile Image
    Gobooth
    Answered on November 30, 2017 at 07:22 PM

    Hello, I modified the code like you suggested, but the problem persists.

    the scrollbars start at 11/19


    if you select  "Party" or "VIP" and head to 13/19.. the problem gets worst fast.


    I appreciate your help.

    1512087578Screenshot 2017-11-30 19.18.59

  • Profile Image
    Gobooth
    Answered on November 30, 2017 at 07:46 PM

    ok, so I did more testing, I modified the form 1 pixel at a time until it looked right on the website, the "magic" number is 535px.

    with that, there are no scrollbars. (page 11 is fixed now) but...

    HOW can I make this wider?

    and how can my make it TALLER??

    if you select party or vip on page 11 - and then go to 13, I want those 3 rows to show, I don't want to scroll through that tiny window.


    I tried remodifying your code above, and I change the height to 1200.. but it doesn't do f*ck all

    1512089045Screenshot 2017-11-30 19.43.28


  • Profile Image
    Kiran
    Answered on November 30, 2017 at 10:39 PM

    I see that your form is built using the new layout and unfortunately, we cannot inject any custom CSS code to change the width or height. Also, I notice that you are using Wix builder for your website. You may consider changing the width of the frame where the form is embedded and embedding the form using the direct URL as provided in the guide below:

    https://www.jotform.com/help/70-Adding-a-Form-to-Your-Wix-Site

    You may also consider changing the form layout to display all the questions in one page by changing the form layout option in the form settings.

    1512099546ChangeFormLayout.png

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help. 


  • Profile Image
    DidierAubin87
    Answered on November 30, 2017 at 11:45 PM

    Thank you Mr Kiran, the problem was solved

  • Profile Image
    Gobooth
    Answered on December 05, 2017 at 07:48 AM

    @Kiran, 


    I have considered it, I don't know if you can see how old my form is.... (4 months?) but i've been flopping from the "all questions on 1 page" to "single page" and they both have similar issues, my form doesn't look right on either on desktop or mobile - it's been 4 months now and I still can't use jotform on my website!!


    is it possible to escalate this issue to a developer? I'm going to cancel my paid subscription if I can't resolve this soon.

  • Profile Image
    BDAVID
    Answered on December 05, 2017 at 10:08 AM

    Unfortunately, there is no much we can do to remove the scroll bars. I have forwarded this to our developers to see if there is a way to have them removed. You will be updated via this thread.

  • Profile Image
    Rose
    Answered on December 06, 2017 at 07:16 AM

    We are sorry for this inconvenience. 

    The scroll problem is due to the widget that you are currently using. For a quick fix, you may want to consider to use Image Choice Field from the form element.

    I cloned your form to my side and add this field to the cloned form for your evaluation: https://form.jotform.com/73393286923971

    Here is the image choice field view ( No scroll):

    1512562391Screen Shot 2017-12-06 at 15.2

    Here is the current image picket widget view (with scroll):

    1512562502Screen Shot 2017-12-06 at 15.2

    Please note that we strongly suggest you to use Image Choice Field for a better visuality. 

    I hope, this helps you. If you need any other assistance by our side, please do let us know.

  • Profile Image
    Rose
    Answered on December 12, 2017 at 09:22 AM

    We are sorry for this inconvenience.

    The problem should be fixed now for the widget. Could you please check and let us know if the issue still persists on your side.

    Thank you in advance for your understanding. 

  • Profile Image
    Daniel
    Answered on December 12, 2017 at 11:20 AM

    Hi Guys, when you say "The problem should be fixed now for the widget"  what do you mean exactly?


    in my original post, I'm using URL : https://www.gobooth.ca/jotform 

    If I go to this URL... the original problem is still there.


    example: #13: the scrollbars are still there. #15 scrollbars are still there.


    to answer previous suggestions, although I appreciate them, they don't really work for me. the image selector you're suggesting is too small... you can barely see the picture.. (defeats the purpose no?) that's why I'm using the 3rd party widget image selector.


    Also, yes, I'm using the "new" look, you suggest using the old one? why? the old look has its own set of problems, the new look 1) looks better, 2) has fewer problems with scrolling bars.



    Not to be ungrateful of Jotform, what I really want to use to Typeform, I am absolutely in LOVE with how it looks, and how it works. unfortunately, they are missing basic fields that I need so that I can automate my workflow with zapier, this is why I'm using Jotform... but if it doesn't look professional.. then I'm stuck looking for a different solution.

    Since I am a paying customer though, it would be great if I could get real help on this problem.

    I'm willing to try anything, new look, old look, as long I have an image selector that works for me (big pictures) - must work on Desktop & mobile too.


    Thanks

    Dan

  • Profile Image
    BDAVID
    Answered on December 12, 2017 at 11:55 AM

    Unfortunately, there is nothing that can be done to avoid presenting the images shown in the Image Picker widget without the scroll bar:

    1513097236scrollbar.png

    You could switch to the "All question in one page" layout, if you do not want to show scroll bars, here is an example of how your form would look like:

    https://form.jotform.com/73455223626961 


  • Profile Image
    Gobooth
    Answered on December 12, 2017 at 08:12 PM

    "there is nothing that can be done"

    He says...

    1513127514Screenshot 2017-12-12 20.11.26

  • Profile Image
    Gobooth
    Answered on December 12, 2017 at 08:35 PM

    @ Kiran


    I tried your 1st suggestion finally, and it that's what fixed the issue! That's a nice work around :) thank you.


    Here's my beef with the form on a single page: it's the thank you page.

    See, I'm using wix, and I'm embedding your form on my page. with my long form, my wix page becomes very long. Upon submission, this very long page (frame) we're on get's redirect to my thank you page. - Except my thank-you page loads at the top of the frame and we're still at the bottom. it looks like nothing happens... but if you scroll up, the page did load.

    is there a way to fix that?

  • Profile Image
    Kiran
    Answered on December 12, 2017 at 08:40 PM

    I have checked the web page provided and see that the issue with the scrollbars is now fixed. Since the other question is related to a different topic, it is moved to a separate thread and shall be addressed thee shortly.

    https://www.jotform.com/answers/1321484

    Thank you!