CODEWITHSUNDEEP
jqueryhtmlfancybox-3
Valentin Emil Cudelcu
Valentin Emil Cudelcu

Reputation: 679

FancyBox (fancyapps) content on top

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/[email protected]/dist/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

Upvotes: 3

Views: 825

Answers (2)

Janis
Janis

Reputation: 8769

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

Upvotes: 2

tcj
tcj

Reputation: 1675

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/[email protected]/dist/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

Upvotes: 1

Related Questions