Cant seem to align the Previous and Next buttons to the right? and cutting off.

  • snaplash
    Asked on September 11, 2014 at 3:41 PM

    My buttons keep getting cut off - I am using the iframe code in my muse site and it will not allow me to position the buttons at 600px from the top.  custom css is below:

    .form-pagebreak {

    background: transparent !important;

    }

    .form-pagebreak-next

    {

    box-shadow: none !important;

    border: none !important;

    display:block;

    position:fixed !important;

    top:550px !important;

    float:left;

    margin-left:20px;

    background:url("http://snaplashwebsite.com/snaplashassets/next.png") no-repeat  !important;

    width:178px !important;

    height:80px !important;

    }

    .form-pagebreak-back

    {

    box-shadow: none !important;

    border: none !important;

    display:block;

    position:fixed !important;

    top:575px !important;

    float:left;

    margin-left:20px;

    background:url("http://snaplashwebsite.com/snaplashassets/previous.png") no-repeat  !important;

    width:178px !important;

    height:80px !important;

    }

     

     .form-all input,select {

    border: 3px solid #c7c7c7;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 14px;

    width: 140px;

    }

    Please, any help you can provide is most appreciated.

     

    Thank you

     

    mark

  • BaneD
    Replied on September 11, 2014 at 4:29 PM

    Hi Mark

    I took a look at your page. From what I see you would need to add this to your CSS to position it at 600px

    .form-pagebreak-next, .form-pagebreak-back
    {
       top: 600px; !important;
    }

    I think that I would go with 400px instead as that would show them right under the last drop box, unless you will be adding more to it. Do add this line of CSS under the others, or together with the other parts of the code.

    When inspecting your code, I do see that you have already included this (I am marking it with bold) so you should try changing those numbers to see what works for you best, but there is one other thing that you can do (I am adding it after CSS code).

    .form-pagebreak
    {
    background: transparent !important;
    }

     

    .form-pagebreak-next
    {
    box-shadow: none !important;
    border: none !important;
    display:block;
    position:fixed !important;
    top:550px !important;
    float:left;
    margin-left:20px;
    background:url("http://snaplashwebsite.com/snaplashassets/next.png") no-repeat  !important;
    width:178px !important;
    height:80px !important;
    }

     

    .form-pagebreak-back
    {
    box-shadow: none !important;
    border: none !important;
    display:block;
    position:fixed !important;
    top:575px !important;
    float:left;
    margin-left:20px;
    background:url("http://snaplashwebsite.com/snaplashassets/previous.png") no-repeat  !important;
    width:178px !important;
    height:80px !important;
    }

     

     .form-all input,select
    {
    border: 3px solid #c7c7c7;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 14px;
    width: 140px;
    }

    OK, so this next solution would be to change the iframe size. So once you get the forms iFrame embed code (which would look similar to this one):

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/42526618364357" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    All you need to do is to change the height of the form (marked with bold above) to add few more pixels so that your buttons do not get cut off..

    You seem to know your way around based on the CSS that you have posted, so I think that you will know how to do this, but do let me know if you need any extra help.

    I would appreciate if you let me know if it works for you :)

  • Kiran Support Team Lead
    Replied on September 11, 2014 at 6:54 PM

    I just cloned your form and see that there is a difference in CSS code that you provided here. It seems you were able to position the buttons from the top and you want it to align to the right position. Please change blue colored values from the below in your custom code.

    .form-pagebreak-next{

    box-shadow: none !important;border: none !important;

    display:block;

    position: absolute;

    right: 350px;

    background:url("http://snaplashwebsite.com/snaplashassets/next.png") no-repeat  !important;

    width:178px !important;

    height:51px !important;

    }

     

    .form-pagebreak-back{

    box-shadow: none !important;border: none !important;

    display:block;

    position: absolute;

    left: 350px;

    background:url("http://snaplashwebsite.com/snaplashassets/previous.png") no-repeat  !important;

    width:178px !important;

    height:51px !important;

    }

    You can change these values as per your requirement. You can take a look at the demo form here. If you are looking for something different, please get back to us. We are happy to assist you.

  • snaplash
    Replied on September 11, 2014 at 7:08 PM

    I am still having issues on it cutting off the button at the bottom. I cant figure what I am doing wrong?

     

    Thank you both so much for the help so far.

     

    Attached is the copy of the iframe code.

     

    Also, Its easier to see here:

     

    http://hanky.businesscatalyst.com/index.html

  • snaplash
    Replied on September 11, 2014 at 7:09 PM

    Also I will not mess with it right now :-)Cant seem to align the Previous and Next buttons to the right? and cutting off Screenshot 20

  • Kiran Support Team Lead
    Replied on September 11, 2014 at 7:35 PM

    Could you try embedding only iframe code omitting everything in <script></script> tags to see if that resolves the issue? 

    Cant seem to align the Previous and Next buttons to the right? and cutting off Screenshot 20

    Also, I see that the changes to align are not reflecting on the form. Please make the changes from the injected Custom CSS code of the form. If the issue still persists, please reply to this post including a screenshot along with the embedded URL.

    Thank you.

  • snaplash
    Replied on September 11, 2014 at 10:34 PM

    it works, thank you! as always the jotform team business model works!

     

    thank you thank you thank you!

  • Ashwin JotForm Support
    Replied on September 12, 2014 at 2:27 AM

    Hello snaplash,

    On behalf of my colleagues, you are welcome.

    Do get back to us if you have any questions.

    Thank you!