Announcement

Collapse
No announcement yet.

Remove Scroll Bar on Embed

Collapse
X
 
  • Time
  • Show
Clear All
new posts

  • Remove Scroll Bar on Embed

    Hello!

    I have my first payment form completed and ready to go. However since I installed it, it is still showing the scroll bar on the right of the iframe rather than just loading full screen. How do I make the iframe expand to be the full length of the payment form?

    Here is the page: https://alcse.org/donate-now/

    Thanks!
    Daniel

  • #2
    I'm having the same problem and modified the code a bit to change the height. The form looks pretty good on a desktop browser but still is cut off on mobile. (So no, no one can donate via smartphone right now.) I'll post more when I've figured it out with my web designer. For your reference, here's my page and iframe code with parts I changed in bold.



    <style>.embed-container { position: relative; padding-bottom: 30%; height: 3200px; overflow: hidden; -webkit-overflow-scrolling:touch; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 3200px; }</style>
    <div class="embed-container"><iframe src="https://connect.clickandpledge.com/w/Form/3aed4813-f450-483f-b0b0-299c7a10d4f9" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen="allowfullscreen"></iframe></div>

    I'm pretty sure this part
    overflow: hidden; -webkit-overflow-scrolling:touch;
    is what I need to modify to make the form functional on mobile. But I don't understand that code.

    Good luck to us both! I wish C&P would provide some better, easier to find guidance if their default iframe code can't be right the first time.

    Jennifer

    Comment


    • #3
      Jennifer,

      Thank you so much for posting this! Your form on desktop looks wonderful! I will try to make changes to mine and see what it looks like.

      Please do let me know how you fix mobile. I have the same issue there as well.


      Daniel

      Comment


      • #4
        Thanks again Jennifer! I got my desktop looking good

        Comment


        • #5
          Oh good, I'm glad! I'm looking forward to hearing from CnP.Support about how to fix the mobile bit.

          Comment


          • #6
            Good day!

            That is something we are working on and it is under development. As of now we don't have ETA but you may want to subscribe to the News forum for all the latest updates & release notes. Here is the link: https://forums.clickandpledge.com/forum/news-announcements-release-notes/news-announcements?f=25

            Sorry for any inconvenience.
            Regards,
            Click & Pledge Support Department

            On Salesforce? Help us by rating our app: Click & Pledge Donor Management on AppExchange

            Join us @ the educational webinars: https://clickandpledge.com/webinars/
            Live Support available Join between 3:00 - 3:30 p.m. ET Monday - Thursday: https://clickandpledge.com/webinars/
            Are you on Salesforce? Join us at the Power of Us Hub: https://powerofus.force.com/0F980000000CjpC

            Comment


            • #7
              Unbelievable, and unacceptable. If it doesn't work on mobile, it's not a solution. I will be relieved when I find a system that is better quality than Click and Pledge, even if it costs more.

              Comment


              • #8
                jenberger

                Responsive design is all of our forms and they all work in mobile devices.

                Please note that iframe has a certain behavior. If you look at the new features the iframe works with no scroll bar - here is an example:

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec ultricies justo, vel eleifend libero. Vestibulum et euismod enim. Curabitur eget maximus lectus. Praesent in interdum nibh. Quisqu…


                reduce your browser's width and refresh the browser. As you see there is no scroll bar.

                Also the new overlay: https://demo.clickandpledge.com/clic...inline-iframe/

                In the overlay design you will see the form is responsive and works without any issues.

                So I am not sure what you are referring to and why you think our forms are not responsive. Please test it and if you think our forms are not what you want please let us know. If you wish to close your account let us know and we will notify Transfirst but from all that we know the Connect forms are responsive in any direction or form.
                Regards,
                Click & Pledge Support Department

                Join us @ the educational webinars: https://clickandpledge.com/webinars/
                Live Support- read more: https://support.clickandpledge.com/s/article/general-information-live-support/

                Comment


                • #9
                  I'm thinking that you didn't read the earlier parts of this thread. It "works" on mobile, and yes, it's responsive, but I have not been able to remove the scroll bar on mobile, which is often unusable for my donors due to their tech capacity. And if you're saying that there is a way to remove the scroll bar on mobile while also making sure the Submit button is visible/clickable, please tell me how to do that, as it was my original question. You can see the issues myself and a fellow forum poster were having earlier in the thread first.

                  Comment


                  • #10
                    Good day jenberger

                    Please login to Connect > Forms > click on the iframe code and copy and paste it. The new codes are the result of a major R&D effort and development that redefines what iframe is.

                    Please note that an iframe code, by the very definition of the "iframe", is not responsive when it comes to height. We have solved this problem.. but we are being blamed for what "iframe" is.

                    The new iframe code that you will copy is not an iframe as defined by the word. If we are to really see what the issue is I suggest you hang in here with me. I am just trying to make sure you see the point and how our solution works.

                    First - the basics:

                    See: https://www.w3schools.com/tags/tag_iframe.asp

                    iframe has the following tags: width and height.

                    While the width may be set dynamically, the height cannot be since one does not know what the height of a form is. So if you were to use the standard iframe syntax the height cannot be responsive. When it is not responsive you will the scroll bar as the container of the iframe does not adjust to the new height.

                    Now let's say we want to make the height responsive. Please see: http://stackoverflow.com/questions/1...ame-responsive

                    The are a ton of articles on this very topic: https://www.google.com/search?q=resp...hrome&ie=UTF-8

                    I apologize for being long in there but I am trying to make sure this thread is a response to your question and also help others.

                    To make the height dynamic, in iframe, one has to know the height ahead of times. This is not standard iframe definition.

                    The new codes we have created and is now live is the result of a lot of development that we hope resolves the issue with those that are iframing the code. See the example I showed you: https://demo.clickandpledge.com/clic...inline-iframe/

                    open the above in a mobile phone and test.

                    The new code may be seen in the Connect:

                    Click image for larger version

Name:	2017-04-14_13-37-27.jpg
Views:	2915
Size:	136.6 KB
ID:	32125



                    This is a design implementation that looks like an iframe but it truly is a dynamic insertion of the form inline. It feels like an iframe but it is not.

                    As stated earlier, the standard HTML iframe is NOT responsive. It is not in its standard design.

                    Please, as stated before, copy the new code and test it. It will work. While you are there try using the new Overlay. It looks great.. we highly recommend that approach.

                    Hope that further helps in seeing why it all works the way they do.

                    Regards,
                    Click & Pledge Support Department

                    Join us @ the educational webinars: https://clickandpledge.com/webinars/
                    Live Support- read more: https://support.clickandpledge.com/s/article/general-information-live-support/

                    Comment


                    • #11
                      Thank you for your detailed response. So just to clarify, the iframe code and the way I'd implement the form has changed since March 20 when I last heard from your team about this? Or I got an incorrect response on March 20? It would have been awesome to post this proactively in this thread!

                      Comment


                      • #12
                        Good day jenberger

                        This feature has been in pre-release for over a month and was first announced to our customer board. It also has been part of the open release for 2 weeks but has not yet been announced. Earlier today it was posted to the Power of Us HUB in Salesforce. The official release will be next week.

                        Once officially released, we will post it to the News Release section of the forum.
                        Regards,
                        Click & Pledge Support Department

                        Join us @ the educational webinars: https://clickandpledge.com/webinars/
                        Live Support- read more: https://support.clickandpledge.com/s/article/general-information-live-support/

                        Comment


                        • #13
                          Well thank you for giving us early information. I will give it a try with my web developer and see how far we get.

                          Comment

                          Working...
                          X
                          😀
                          🥰
                          🤢
                          😎
                          😡
                          👍
                          👎