WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Inline Content shows up mis-aligned, and with vertical scroll bar (6 posts)

  1. nef426
    Member
    Posted 2 years ago #

    Hi RavanH,

    I'm using Easy FancyBox for inline-content, specifically for a newsletter signup form. Anyhow, the box works nicely, however the styling has gone completely wonky, for some reason it insists on adding a vertical scroll bar, and shifts the content down and to the left, out of the box. Any ideas?

    You can access it by clicking the 'subscribe to our newsletter' link at the top right of this page: http://jackdennisoutdoors.com/

    Thanks

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    In your stylesheet style.css on line 1105:

    #subscribebox {
    ...
    right: 47px;
    top: 25px;
    ...
  3. nef426
    Member
    Posted 2 years ago #

    Thanks,

    Any ideas on the scroll bars?

  4. nef426
    Member
    Posted 2 years ago #

    Scroll bars show up in Firefox and Chrome, but not safari... any ideas on how to get rid of them?

  5. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    This is currently wrapping the actual form in the source code:

    <div style="display:none;">
    ... scripts and styles ...
    <div id="subscribebox">
    	<div id="subscribetopbox">
    	... title plus form code...
    	</div>
    </div>
    ... some script ...
    </div>

    Now, to take control over the FancyBox frame size and scroll bars (in this case) you can give the div with the ID "subscribebox" some parameters. I'd try somehting like this:

    <div id="subscribebox" style="width:600px;height:400px;overflow-x:hidden;overflow-y:auto;">

    Change the width and height to your liking (the actual form width is about 600px I believe, but you can give the frame any other size) and if you need to, you can change the values for overflow-x and overflow-y depending on your preference to "scroll", "auto" or "hidden".

    Do not forget to test the actual submission process and how a failed validation or success message might influence the form size (and subsequent scroll bar behaviour) after submit.

    Hope that helps and I thank you VERY kindly for you more than generous donation! :)

  6. nef426
    Member
    Posted 2 years ago #

    sweet -

    Adding the parameters directly to the <div> was my issue - i've tried parameters like that within the main CSS stylesheet, but that never seemed to work right --

    Thanks for all the help -- no prob.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic