Title: css problem inside the fancybox
Last modified: August 21, 2016

---

# css problem inside the fancybox

 *  Resolved [vmallder](https://wordpress.org/support/users/vmallder/)
 * (@vmallder)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/css-problem-inside-the-fancybox/)
 * Hello Again,
 * I am sorry to bother you again. I am very happy to have my visual form builder
   form appearing in my fancybox. But I am having a problem now where the default
   css for the form is not maintained inside the fancybox under certain circumstances.
   I am not great with css, so I was wondering if you could take a look and see 
   if anything jumps out at you. at an example that I have set up for you, and let
   me know if you have any ideas for why the form css is not maintained under this
   particular condition. (I bet you are tired of people trying to do crazy things
   with your fancybox 🙂 Here’s an explanation of the examples I have provided:
 * Background: I have a button on page in my event calendar. When the button is 
   pressed, a form will popup in a fancybox that the user can fill and submit to
   notify the event organizer that they would like to volunteer to help out at the
   event.
 * In the first example, when you press the green button called “volunteer at show”
   on the right side of the page the form will appear in the fancybox and the css
   styling for the form is correct. You can see that the styling in the fancbox 
   matches that of the form that is inline (via shortcode) in the middle of the 
   page middle of the page. This is example is located here:
    [http://dev.pvda.org/event/pvda-spring-show-2-day-recognized/](http://dev.pvda.org/event/pvda-spring-show-2-day-recognized/)
 * In the second example, the short code for the form is NOT included in the content
   in the middle of the page. The only way you can view the form is to click on 
   the “volunteer at show” button. In this example, you will notice that the form
   looks odd: checkbox items are no long in columns, etc.
    This example is located
   here: [http://dev.pvda.org/event/pvda-ride-for-life-show-2-day-recognized/](http://dev.pvda.org/event/pvda-ride-for-life-show-2-day-recognized/)
 * I will keep digging, but if you have any insights on what is causing it, or where
   I should target my investigation, I would greatly appreciate it.
 * Thanks!
 * [https://wordpress.org/plugins/easy-fancybox/](https://wordpress.org/plugins/easy-fancybox/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/css-problem-inside-the-fancybox/#post-4670049)
 * Hi, the style rules for these forms are defined in [http://dev.pvda.org/wp-content/plugins/visual-form-builder-pro/css/visual-form-builder.min.css](http://dev.pvda.org/wp-content/plugins/visual-form-builder-pro/css/visual-form-builder.min.css)
   and this stylesheet is included in the head section of the source in your first
   example. But the second example page source is missing this stylesheet. That’s
   why the form looks odd.
 * I’ve no idea how From Builder works and based on what it desides to include the
   stylesheet or not but is sounds like the use of the shortcode plays some role
   here…
 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/css-problem-inside-the-fancybox/#post-4670051)
 * Basically, I’d suggest to always use the shortcode and hide the form like the
   following example.
 * Go to Settings > Media and enable the Inline Content option, then place this 
   in your page/post content:
 *     ```
       <div class="fancybox-hidden"><div id="myform-1" style="width:300px;height:500px;">[theshortcodehere]</div></div>
       ```
   
 * (note 1: that you can change the style rule dimensions to influence the resulting
   fancybox size)
    (note 2: always use a unique ID value, same ID may not exist 
   twice on the same page!) (note 3: replace [theshortcodehere] with the actual 
   shortcode)
 * Now link to it for opening in FancyBox like this example:
 *     ```
       <a href="#myform-1" class="fancybox-inline">Volunteer</a>
       ```
   
 * (note: the link does not have to be beside the shortcode, it may be anywhere 
   on the same page and there can be more than one link)
 *  Thread Starter [vmallder](https://wordpress.org/support/users/vmallder/)
 * (@vmallder)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/css-problem-inside-the-fancybox/#post-4670085)
 * Thank you again for responding. I do have the inline content option enabled. 
   If I follow your example exactly (except without the width and height), the only
   thing that is shown in the fancybox is the shortcode ‘[vfb id=15]’. Your example
   is not working for me the way you expect it to work.
    The only way I have been
   able to get the form to display inside the fancybox is to output the results 
   of do_shortcode. Here is my code.
 *     ```
       $label = “Volunteer at Show”;
       $button_style = 'class="ActiveShowButton fancybox-inline"';
       $str 	.= '<a href="#volunteer_form"' . $button_style . '>' . $label . '</a>';
       $str 	.= '<div class="fancybox-hidden">';
       $str 		.= '<div id="volunteer_form">';
       $str 			.= do_shortcode('[vfb id=15]'); // display form, but css is wrong
       //	$str 			.= '[vfb id=15]';// displays only '[vfb id=15]'
       $str 		.= '</div>';
       $str 	.= '</div>';
       ```
   
 * Thank you for your observation that the [http://dev.pvda.org/wp-content/plugins/visual-form-builder-pro/css/visual-form-builder.min.css](http://dev.pvda.org/wp-content/plugins/visual-form-builder-pro/css/visual-form-builder.min.css)
   file is being loaded in the first example but not in the second example. I will
   start investigating in that area.
 * Thank you very much.
 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/css-problem-inside-the-fancybox/#post-4670104)
 * OK, I was talking about **post** or **page** content, not PHP content. If you
   want to use a shortcode in any PHP template then indeed you need to work with`
   do_shortcode(...)` but I’m not sure of the form builder plugin will embed the
   needed stylesheet then.
 *  Thread Starter [vmallder](https://wordpress.org/support/users/vmallder/)
 * (@vmallder)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/css-problem-inside-the-fancybox/#post-4670111)
 * Hello Again,
 * I have been doing a bit of investigating, and I have found that, if the fancybox
   is launched from a page or a post, it does not inherit the css styles that have
   been loaded by the header of the parent window. I am unsure whether to consider
   this a problem or not. It would be nice (for me) if the already loaded styles
   were inherited by the fancybox window, but I can certainly see other uses for
   the fancybox where you wouldn’t want to have the sytles inherited. I have be 
   able to figure out how to reload the default visual form builder css styles, 
   just before the fancybox opens up, but, doing that causes the fancybox open very
   slowly because the visual form builder code is very inefficient in this case.
   If I continue down this path I will look for ways to make the form builder load
   the css more efficiently.
 * At this point, I do not need any further help from you. Thank your very much 
   for your support. There are so many plugin authors who do not respond to support
   requests, it is very nice to talk to one who does. So, thank you very much, your
   help is appreciated.
 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/css-problem-inside-the-fancybox/#post-4670152)
 * Hi, if you want to make inline content inherit styles from the usual post content,
   then you could give the inline content wrapper div the same class as the normal
   post content div. Try, for example, `class="hentry fancybox-inline"` where hentry
   should be used in your stylesheet for most of the post content style rules.
 * For a deeper understanding of why this is happening: the FancyBox script creates
   an empty (still invisible) wrapper at the end of the page source, just before
   the closing </body> tag. As soon as any candidate link is clicked, the targeted
   content (inline or other media) is appended/moved/copied to this empty wrapper
   and then animated to form the lightbox effect.
 * The style rules that apply to normal content are usually formed like (for example)`#
   main p { margin:... }` or `.hentry { color:... }` and because this empty fancybox
   div is not living inside the div with ID “main” or class “hentry” these rules
   do not apply.
 * Giving inline content the extra class “hentry” (in this example) will make it’s
   content inherit those style rules even when moved to the empty fancybox div.
 * Hope that helps 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘css problem inside the fancybox’ is closed to new replies.

 * ![](https://ps.w.org/easy-fancybox/assets/icon-256x256.png?rev=3188201)
 * [Firelight Lightbox](https://wordpress.org/plugins/easy-fancybox/)
 * [Support Threads](https://wordpress.org/support/plugin/easy-fancybox/)
 * [Active Topics](https://wordpress.org/support/plugin/easy-fancybox/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/easy-fancybox/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/easy-fancybox/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/css-problem-inside-the-fancybox/#post-4670152)
 * Status: resolved