JQueryUI Tabs inside jQueryUI Dialog — how do I get a scrollbar for the tab-content only, rather than the entire dialog box?

You could limit the height of each div which contains your 'content' ie: height:100px; overflow:auto Demo: jsfiddle.net/AeXNP Which makes everything very simple Edit : The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css... To use overflow in your case, you require a height of the div. As the height is changing all the time, you don't know what height it will be.

Therefore you need to manually set a margins and padding so you can set the height to 'auto'. So the css for the self-expanding tab contents is: fixedSizedTab { overflow:auto; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin-top:50px; margin-bottom:10px; margin-right:0px; margin-left:0px; } Demo: jsfiddle.net/AeXNP/2.

You could limit the height of each div which contains your 'content' ie: height:100px; overflow:auto; Demo: jsfiddle.net/AeXNP/ Which makes everything very simple. Edit: The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css... To use overflow in your case, you require a height of the div.As the height is changing all the time, you don't know what height it will be.

Therefore you need to manually set a margins and padding so you can set the height to 'auto'. So the css for the self-expanding tab contents is: . FixedSizedTab { overflow:auto; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin-top:50px; margin-bottom:10px; margin-right:0px; margin-left:0px; } Demo: jsfiddle.net/AeXNP/2.

That looks pretty good -- but it would be much nicer if the tab height automatically resized with along with the containing dialog box. – rmw Sep 11 at 0:31 Re-updated answer to cover this :) – Spencerooni Sep 11 at 2:32 Yes, even better. That hard-coded margin-top:50px does introduce a dependency on those tabs being a particular height.At the moment in my actual application they are only 30px.

But I think I can live with that. Perhaps some javascript could calculate the "real" height of the tabs when the page is first rendered.. but that might be more work than it's worth. – rmw Sep 11 at 4:28 Ah, found a case where this solution fails -- when the user resizes the dialog, causing the tabs to wrap... – rmw Sep 11 at 8:16 Ah, didn't notice that.

If you give the dialog a minimum width it would restrict the tabs from wrapping. I can't think of another way... – Spencerooni Sep 11 at 11:31.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions