FancyBox (fancyapps) content on top

Question

I am using fancyBox v3.5.6 from fancyApps.

Is there any posibility to disable auto centering and move the content on top? I wasn't able to find anything that disable center aligning and move the content up.

    var dialogMessage = '<div>This is a message</div';
       $.fancybox.open(dialogMessage,{
        //maybe here some option?
      });

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

score 2 · Answer 1 · answered May 23 '19 at 05:32

fancybox v3 uses pseudo element trick for vertical centering (you can google for more info, for example, see #4 here - https://blog.logrocket.com/13-ways-to-vertical-center-in-2018-cb6e98ed8a40). So, you can hide that element and then your content will be right at the top. You could do that for all slides or using slideClass option to apply custom class name when needed, for example -

JS

$.fancybox.open({
  src : '<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>',
  type : 'html',
  slideClass : 'fancybox-top'
});

CSS

.fancybox-top::before {
  display: none;
}

DEMO

https://codepen.io/anon/pen/arqzYN

Then also try to change from `display: inline-block;` to `display: block` for `.fancybox-content` — Janis, May 30 '19 at 06:09

tcj · Answer 2 · 2019-05-22T20:09:25.140

Do you mean vertically centering? Unfortunately, looks like there is no option to disable it, so you can do it by applying the following css to the .fancybox-content class in which the box is in, I made it fill the content by default but you can set your desired width if you wish as well as for the top :

.fancybox-content {
   top: 15px !important;
   position: absolute !important;
   right: 0 !important;
   left: 0 !important;
   margin: auto !important;
   width: fit-content !important;
   width: -moz-fit-content !important;
}

Example in the snippet below :

var dialogMessage = '<div>This is a message</div';
       $.fancybox.open(dialogMessage,{
        //maybe here some option?
      });

.fancybox-content {
    top: 15px !important;
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    margin: auto !important;
    width: fit-content !important;
    width: -moz-fit-content !important;
  }

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

Your solution works, but try on extra long content, it will not look so great. — Janis, May 26 '19 at 07:05
That's why I mentionned he can set a fixed width if he doesn't want the box to adapt to a long text. — tcj, May 26 '19 at 07:42

FancyBox (fancyapps) content on top

2 Answers2