wicket: how to make div height dependent on another div

I'm a GWT refugee, trying to figure out how to do various Ajax-ish things in Wicket.

I have two divs. I'd like to make the first div's max-height dependent on the height of the second div, with a "more/less" link so that the user can expand the first div.

Example:

The content of both divs is variable, and since div2 has wrapped text in a proportional font, I can't really predict it开发者_开发技巧s height until rendered in the browser.

In GWT I accomplished this by adding content to the div1 a line at a time, and if it exceeded the height of div2 (which already had its content rendered), I simply removed the line. Since GWT runs on the client, this is fairly straightforward.

What's the best way to do this in Wicket? I'm expecting to need a little Javascript, but if there is a component that already does this (or makes it easier) I'd be very happy to use it.

---

With help of pure Wicket I do not think, that there's a way to do this. But maybe the Wicket + JQuery approach will help you achieve your idea...

---

There seems to be a rather simple JavaScript-solution (except that it doesn't solve the showing-half-a-line-problem but I think that can be solved by toying around with this:

document.getElementById("div1").style.height = document.getElementById("div2").offsetHeight;

---

Can't this be solved almost completely by CSS? Like adding both DIVs to a third DIV with an overflow:hidden attribute, cutting of the second DIVs contents and expanding the height of the wrapping DIV by JavaScript? Maybe you'll have to change DIV1 to inline processing so it wouldn't 'push' the lower border of the container or something like this... Just as a pointer, didn't try it, can't try it right now and not sure if it works but I think, it should. Anyway you or me, someone would have to play around with this to find out...

Hope this helps a little bit.

---

You could render both fully open (to improve accessibility to non-js users), then restrict the height of Div 1 to the height of Div 2.

So (with jQuery)...

CSS

#div1 { overflow: hidden; }

Javascript

$(document).ready(function() {
  var div2_height = $('#div2').height();

  $('#div1').height(div2_height);
});

To account for chopping on a line, test the line-height and set the height as a multiple.