Custom CSS: How to add horizontal scrollbar on feedback page

  • Profile Image
    stormingrobots
    Asked on March 02, 2018 at 01:13 PM

    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? 

  • Profile Image
    Sabbir
    Answered on March 02, 2018 at 02:22 PM

    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.

  • Profile Image
    stormingrobots
    Answered on March 04, 2018 at 09:38 AM

    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? 

     

  • Profile Image
    TREVON
    Answered on March 04, 2018 at 11:01 AM

    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.

    1520178810Scrolling.gif

    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;

    }

  • Profile Image
    stormingrobots
    Answered on March 04, 2018 at 11:50 AM

    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"  1520182158junk.PNG

    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. 

  • Profile Image
    jonathan
    Answered on March 04, 2018 at 03:11 PM

    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.

  • Profile Image
    stormingrobots
    Answered on March 05, 2018 at 08:47 AM

    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? 

  • Profile Image
    aubreybourke
    Answered on March 05, 2018 at 10:18 AM

    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.

  • Profile Image
    stormingrobots
    Answered on March 11, 2018 at 08:49 AM

    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. 


    1520772418junk.PNG

  • Profile Image
    TREVON
    Answered on March 11, 2018 at 12:14 PM

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

    1520784864Screenshot_20180311-191153.jpg

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