Galleria Fatal error: Could not extract a stage height from the CSS. Traced height: 0px

Question

If I have the line <style type="text/css"></style> , even though it is blank, Galleria throws the error message "Fatal error: Could not extract a stage height from the CSS. Traced height: 0px."

It would appear that even though I'm telling galleria to use a height of 300 via:

$('#galleria').galleria({ 
width: 300, 
height: 300, 
transition: 'fade' 
});

it tries to first determine the height and the CSS line is confusing it, so it throws this error. If I remove that one line, no more error.

Is there anyway I can still use <style type="text/css"></style>? we use it to customize the look and feel of our site based on the customer using it.

After working on this for hours, I finally gave up and decided to come back to it latter. When I came back to it, everything was working fine. I have no idea what the solution is, the only thing I can think of is that I had a two referrences to the same js in my code somewhere that was causing confusion. Thank you to all that answered. — SLoret, Aug 28 '11 at 16:10
I'm seeing this when the gallery is hidden at page load time, i.e. it is on a non-active tab. wrote it up in the forums: http://getsatisfaction.com/galleria/topics/_could_not_extract_a_stage_height_when_gallery_on_non_active_tab — russau, Nov 20 '11 at 03:17

score 57 · Accepted Answer · edited Jul 19 '13 at 02:31

57

Make sure you include:

Head:

<link type="text/css" rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<script type="text/javascript" src="js/galleria-1.2.5.min.js"></script>
<script type="text/javascript" src="galleria/themes/classic/galleria.classic.min.js"></script>

Also the in page style:

#galleria{height:467px}

And below the images:

<script type="text/javascript">
$('#gallery').galleria({
width: 700,
height: 467 //--I made heights match
});
</script>

If you have problems with this troubleshoot with a clean installation and add until you find the cause.

edited Jul 19 '13 at 02:31

JCOC611

19,111
14
69
90

answered Aug 08 '11 at 23:45

Emilio

686
5
3

My solution can be used too. (while using twitter bootstrap). The most common error is caused from invisible element (hidden). So I assume that it can be executed (or make galleria runs) when the element shown. $('#myTab li:eq(0) a').click(function (e) { e.preventDefault(); $(this).tab('show'); Galleria.run('#slide', {width: '100%', height: 340}); }); – Aldry Wijaya Jul 01 '13 at 08:40
Thanks! I was missing this: #galleria{height:467px} – Marc Rochkind Jul 04 '13 at 17:35
4

What if I don't want to specify a height. Like on responsive layouts? – MEM Jun 13 '14 at 11:45
Thanks so much! min-height was missing for me only on some pages – NaturalBornCamper Jan 13 '16 at 09:49

score 12 · Answer 2 · answered Feb 28 '13 at 09:27

12

It might help some one, who still gets this error:-

I got this error because I had a hidden gallery.

FIX:- Give the gallery div a height in CSS, then in js file,

Galleria.run('#gallery', {
  height: parseInt($('#gallery').css('height')),
  wait: true
 });

See these links for more info:- http://galleria.io/docs/references/errors/

http://galleria.io/docs/options/wait/

answered Feb 28 '13 at 09:27

Divyanshu Das

3,698
4
23
27

1

This got the job done for me, thanks! The wait parameter will force the gallery to only initialize once the DOM element is visible. – raugfer Mar 15 '13 at 17:51
Yeah! It was exactly this. The images were there, but they weren't loading in time for the stage to get their height. A huge thank you! – Luca Corsini Jan 06 '21 at 14:32

SaphuA · Answer 3 · 2011-07-12T17:53:07.257

11

You need to give the galleria image container a height in css. This is where galleria shows the images in (so it should be smaller than the height of galleria itself).

.galleria-stage {
    height: 450px;
    position: absolute;
    top: 10px;
    bottom: 60px;
    left: 10px;
    right: 10px;
    overflow: hidden;
}

edited Jul 12 '11 at 17:53

answered Jul 12 '11 at 16:37

SaphuA

3,092
3
39
58

This was causing some offsetHeight bug in Opera Mobile 12 to rear its head, causing Galleria to throw its hands up and refuse to function. Explicitly giving the stage a height and width cured the problem for me. – Eric L. Nov 18 '13 at 13:42

score 5 · Answer 4 · edited Dec 14 '11 at 20:41

5

I had this error only in IE. The solution is to force the height.

In the galleria.classic.css CSS add a height for the class .galleria-stage

example.

.galleria-stage { 
  height:450px; <-- set this to any height and i should work :)
  position: absolute; 
  top: 10px; 
  bottom: 60px; 
  left: 10px; 
  right: 10px; 
  overflow:hidden;
}

edited Dec 14 '11 at 20:41

Andrew

13,757
13
66
84

answered Aug 31 '11 at 08:18

Dacarts

51
1

This was causing some bug in Opera Mobile 12 to rear its head. Explicitly giving the stage a height and width cured the problem for me. Great tip, thanks! – Eric L. Nov 18 '13 at 13:41

score 3 · Answer 5 · answered Oct 11 '12 at 20:35

3

Scenerio

If this is happening to you, it is most likely because you have the Galleria element hidden when the page loads. This is mentioned in a couple of other answers, but the solutions that those answers outline are not necessarily the best methods.

Problem

For me, I have the Galleria container set to display:none; when the page launches. The Galleria object is in a lightbox, so it does not show up until the user clicks on a button. This display:none property is what is causing the issue.

Solution

Instead of hiding the element with display:none; use a large negative left margin like left:-9999px; or margin-left:9999px. Either of these methods will ensure that Galleria loads properly.

answered Oct 11 '12 at 20:35

VictorKilo

1,839
3
24
39

This approach is what I went with. In my case, I used `left: o; top: -2000px;` in order to keep the total area that needs to be rendered/processed down, as it can apparently affect performance on slower devices. – David Oliver Jan 13 '13 at 17:49
These huge margins will require additional steps in order for your page to be visible correctly in some mobile browsers... – Serj Sagan Apr 17 '14 at 06:38
Thanks for the input! For me it has worked because the height of all pages is fairly short. If you have very long pages, a left margin could affect performance. The jist of my solution is to find a way to hide the gallery without using `display:none`. – VictorKilo Jul 21 '14 at 20:17

score 2 · Answer 6 · answered Jul 18 '11 at 20:32

2

Try to set the DocType as below if you are using classic theme along with setting the height and width in .galleria-stage css class in galleria.classic.css file

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">

answered Jul 18 '11 at 20:32

ShankarSangoli

69,612
13
93
124

I was getting the stage height error in IE only. The comments about the "height" did not solve it for me but adding this DocType did. Thanks! – TMC Nov 05 '11 at 02:07

score 2 · Answer 7 · edited Apr 09 '12 at 18:25

2

I had the same problem while using jQuery galleria and I solved it. I modified some parameters in galleria-1.2.5.min.js.

Here is the link to download the library, just copy the code and paste it in your js file.

edited Apr 09 '12 at 18:25

рüффп

5,172
34
67
113

answered Feb 15 '12 at 18:32

simo

21
1

score 1 · Answer 8 · answered May 31 '12 at 17:32

I'm adding an answer to this question as all of the above didn't work for me. In my case I was loading galleria (1.2.7) dynamically within a embedded cross domain javascript widget. Even though the stage height was set correctly, the scripts were loaded and galleria initialized correctly this error message would periodically display.

I ended up modifying the galleria source to suppress error messages from displaying (perhaps a better option would be to make this dependent on the debug flag, however I didn't feel the need)

Galleria.raise = function( msg, fatal ) {

    var type = fatal ? 'Fatal error' : 'Error',

        self = this,

        css = {
            display: none;
        },

score 1 · Answer 9 · answered Apr 18 '14 at 03:43

1

As per the instructions, section Setting dimensions , do this in your CSS (obviously switch out #galleria for what ever way you id your wrapper, I use a class called galleria so I use .galleria)

#galleria { width: 700px; height: 400px; }

answered Apr 18 '14 at 03:43

Serj Sagan

28,927
17
154
183

score 1 · Answer 10 · edited Nov 04 '12 at 10:19

i used to have the same pb. then i tried something else. all my javascript files used to be at the end of my html file. so i tried to move them all to just before the </head> closing tag .

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/galleria/galleria-1.2.5.js" /></script>
<script type="text/javascript" src="lib/galleria/themes/classic/galleria.classic.min.js"></script>
</head>

i'm not really happy coding this way (ie javascript at the end). anyway it seems to work and the gallery is great !

score -1 · Answer 11 · edited Oct 27 '12 at 12:24

-1

After several attemps, none of the above solutions worked for me. Is a strange bug, as it's difficult to replicate and trace, sometimes work and sometimes not.

But trying things found on the net, this one seems to work, by the moment. For those stuck with this i guess it's worth a try:

Open galleria-1.2.6.min.js
Replace timeout:1E4 string for timeout:1E10

edited Oct 27 '12 at 12:24

Prasad Jadhav

5,090
16
62
80

answered Mar 13 '12 at 18:40

Jesús Plaza

1
1

Galleria Fatal error: Could not extract a stage height from the CSS. Traced height: 0px

11 Answers11

Scenerio

Problem

Solution