Custom CSS: How to add horizontal scrollbar on feedback page

I am testing out the feedback button feature: 

http://www.stormingrobots.com/prod/summer.html - see the "Summer Registration" Button .  

If used in cell phone, it is not scrollable unless they go landscape. 

Can I enable the horizontal  scroll bar? 

Youcan try adding the following CSS to your website.

<style type="text/css">

div.jt-content

{

overflow-x: scroll;

overflow-x: auto;

}

</style>

You can check on your cell phone to see if the horizontal bar appears or not.

Let us know if you have any further query.

I am currently also testing out to use your https://form.jotform.com/static/feedback2.js"  from https://www.stormingrobots.com/prod/summer.html

1) I have inserted the css, but it does not scroll.  do I have to put your suggestion into the custom css at jotform? 

Just to clarify what I am looking for.  I am speaking of the frame which embeds the form after I click on that "Summer Camp Registration" button. 

2) how to control the button size? 

1) I have inserted the css, but it does not scroll.  do I have to put your suggestion into the custom css at jotform? 

Just to clarify what I am looking for.  I am speaking of the frame which embeds the form after I click on that "Summer Camp Registration" button. 

I have checked you form and I am able to scroll through the form when I click on "Register"  button.

2) how to control the button size? 

To control the size of the submit button you may need to change settings of the following code you can try and edit the area highlighted in "red".

/*--- submit button --*/

#input_80 {

    width : 500px;

    height : 50px;

    margin : 0;

    color : #000000!important;

    vertical-align : middle;

    padding : 4px;

    font-weight : 700;

    font-size : 15pt!important;

    font-variant : small-caps !important;

    text-transform : capitalize!important;

    margin : 0 auto;

    background-image : url("http://www.stormingrobots.com/prod/sr/img/steel.png");

    border-radius : 10px;

    border : 5px;

    border-color : #333333;

    border-style : outset;

}

you are not looking at the frame I am referring to : 

1) you need to go to : http://www.stormingrobots.com/prod/summer.html 

2) click on the "Summer Camp Registration" Button on the right side of the window, which is actually  your frame using  https://form.jotform.com/static/feedback2.js"  

i can scroll up & down, but not left & right . That's what I meant by the horizontal  scroll bar as stated in my 1st post. 

3) "button". I don't mean any button in the form, but I mean the button generated by your script. 

You can check this same thread on the many ways you can customize the feedback form. 

https://www.jotform.com/answers/505166-Changing-the-position-of-the-Feedback-button

As you can see the customization codes must be apply in the website page and not in the form anymore.

I hope this help. Let us know if you need further assistance.

Hi, 

Thanks for the link. But it does not help.

The script your site provided for it is: 

 new JotformFeedback({

        formId: "80384225684158",

        buttonText: "Summer Camp Registration",

        base: "https://form.jotform.com/",

        background: "#F59202",

        fontColor: "#FFFFFF",

        buttonSide: "right",

        buttonAlign: "center",

        type: 1,

        width: 700,

        height: 500,

        isCardForm: false

      });

I looked into feedback2.js to see if there is a scroll x  or horizontal scoll parameters which I can pass in. I do not seem to find it.  

It seems that I need to download the https://form.jotform.com/static/feedback2.js and make changes to it instead. Is it what you would suggest me to do? 

You can try embedding using this code:

    <script src="https://form.jotform.com/static/feedback2.js" type="text/javascript">
      new JotformFeedback({
        formId: "80384225684158",
        buttonText: "Summer Camp Registration",
        base: "https://form.jotform.com/",
        background: "#F59202",
        fontColor: "#FFFFFF",
        buttonSide: "right",
        buttonAlign: "center",
        type: 1,
        width: 700,
        height: 500,
 
        isCardForm: false
      });
    </script>

<style>
div.jt-feedback.u-responsive-lightbox.ui-draggable{
overflow-y: hidden;
overflow-x: scroll;
}
</style>

It will add a horizontal scrollbar to your popup.

Thank you for your response.  Unfortunately, it does not solve the issue.  Do note that the y scroll never an issue, it is the horizontal issue when the browser window is too small, like a cell phone as user cannot resize the browser window like a desktop can. 

See the image. 

The left corner cannot scroll further back to the left. 

I have tested your form on different forms and I was able to scroll from left to right.

Would you kindly share which phone you are using for us to run further test?