Admin Forum:Resize to maximum element

Forums: Admin Central Index → Technical Help → Resize to maximum element

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4369 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

I have a series of inline-tables, like these:

IMAGE
Caption

IMAGE
Caption too long

IMAGE
Caption

The header cell's height can be various, so I want to make all the table (basically the captions) the same, equals to the maximum height of the series. I cannot wrap them under a container, or rather the tables are on more then one line, like this:

IMAGE
Caption

IMAGE
Caption too long

IMAGE
Caption

So I cannot find a solution with CSS only, how can I do it with JS? leviathan_89 23:08, 1 May, 2012 (UTC)

This is about creating a template isn't it? If so, there's an extension named ImageSizeInfoFunctions which is apparently enabled on some Wikia wikis. If you can convince Staff to enable that extension for your wiki as well, you can solve this without JavaScript.

For a JavaScript solution you should use jQuery's height() and css() methods. --  pecoes  00:51, May 02, 2012 (UTC) 

I see, you've edited your code. So it's not the images that are causing problems but the text that accompanies them. Is that right? --  pecoes  00:55, May 02, 2012 (UTC) 

That's right, the images are all set to a fixed dimension, it's the caption that can cause troubles. Of course I can set an height tall enough for displaying two lines, for example, but I don't know if there will be captions longer. I just would like to have more solutions to choose from. I already saw those jquery functions, but I did not understand how I can search and store the height of the tallest caption... leviathan_89 01:13, 2 May, 2012 (UTC)

(Reset indent) If you assign all cells a fixed width and give them a common identifier - let's say a class named "stretchable" - then you could do it like so:

$(function () {
    var maxHeight = 0;
    $('.stretchable')
    .each(function () {
        var h = $(this).height();
        if (h > maxHeight) {
            maxHeight = h;
        }
    })
    .css('height', maxHeight + 'px');
});

(untested) --  pecoes  01:25, May 02, 2012 (UTC) 

It works (better with .outerHeight()). Can I make it works differently for each tables? For example, if I have a situation like this:

table.main
 tr
 td
  table.stretchable
  table.stretchable
  table.stretchable
 /td
 /tr
 tr
 td
  table.stretchable
  table.stretchable
  table.stretchable
 /td
 /tr
/table

Maybe it's better for each group to have its own max height. Last thing, do I need to make some corrections for monobook? Anyway it works fine even like this, thank you. leviathan_89 13:05, 2 May, 2012 (UTC)

You could try this:

$(function () {
    $('.stretchable')
    .each(function () {
        if ('undefined' == typeof $(this).parent().data('maxHeight')) {
            $(this).parent().data('maxHeight', $(this).outerHeight())
        } else {
            $(this).parent().data(
                'maxHeight',
                Math.max(
                    $(this).parent().data('maxHeight'),
                    $(this).outerHeight()
                )
            )
        }
    })
    .css('height', $(this).parent().data('maxHeight') + 'px');
});

It's untested as well :P

I don't know much about Monobook, but I doubt it makes a difference. --  pecoes  19:03, May 02, 2012 (UTC)