Easy FancyBox
[resolved] FancyBox with Contact form7 width of box (7 posts)

  1. peted172
    Posted 3 years ago #

    I'm trying to get FancyBox not to auto width when using Contact Form7

    How do i over ride the auto width and give the form a standard width of say 350px?



  2. Eric
    Posted 3 years ago #

    I'm having a similar issue, but with a Gravity Form. I can define a custom width in css, but I end up with a horizontal scrollbar in the fancybox. Either there's some margin or padding being applied that's causing it (which I can't find), or I'm setting the width on the wrong element, or there's a miscalculation. I've done this before on another site, but with an earlier version of the plugin. Presently I'm using the developer version, 1.5.0dev10, as suggested in another post to fix some php notices.

    The site is still in dev. Click on the big "Apply" button in the header:
    http://tinyurl.com/a4nwkmc (see the horiz scrollbar? how do I kill it?)


  3. peted172
    Posted 3 years ago #

    Worked it out.

    Had to change the base.css of the theme

  4. RavanH
    Plugin Author

    Posted 3 years ago #

    @peted172 great you got it solved :)

    @Eric it seems a CSS thing too. What happens if you try removing the width for #apply_form_pop in your main.css ? Or set it to 100%...

  5. Eric
    Posted 3 years ago #

    Hi @RavanH.
    If I remove the width: 700px from #appy_form_pop, the form defaults to a rather narrow width, one that I didn't set... I tried changing the default window dimensions in the easy fancybox admin settings, but they appear to be ignored in this case.

    If I want this form to be 700px wide, and pop into a fancybox without horizontal scrollbars, on which element do I assign the desired width?


  6. Eric
    Posted 3 years ago #

    Solved it. For anyone trying to accomplish this with Gravity Forms, the following is what worked for me. Your mileage may vary.

    First, it's a good idea to give your form a custom css class in the GF Form Settings "Advanced" tab. Then in your stylesheet:

    .gform_wrapper { max-width: 100%; }
    .gform_wrapper.yourcustomclass_wrapper {
    	position: relative;
    	width: 600px;
    	max-width: 100%;
  7. RavanH
    Plugin Author

    Posted 3 years ago #

    @Eric, thanks for sharing your solution to this very tricky CSS conflict :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic