Question

I have a simple BorderContainer set up with a center and bottom region.

<div dojoType="dijit.layout.BorderContainer">
   <div dojoType="dijit.layout.ContentPane" region="center">
       <!-- Some big content -->
   </div>
   <div dojoType="dijit.layout.ContentPane" doLayout="false" region="bottom" id="log">
          <span class="log_msg">First message</span><br/>
          <span class="log_msg">Second message</span><br/>
          <span class="log_msg">Third message</span><br/>
   </div>
</div>

As you can see, the bottom pane is intended to be a log similar to that of the Eclipse IDE. I’d like the log div to take up 100% of the bottom pane (margins are fine), to which I’ll be adding splitters later. However, at present it fits its height to its contents and if there is too much content, the text is simply hidden off the screen. (The ‘overflow’ css rule doesn’t apply because the log div itself is big enough to hold the text, it’s just off-screen.)

What styling rules can I apply to achieve the desired effect? Thanks!

Answer 1

The specification for BorderContainer is that you must set a height on top and bottom regions (and a width on left and right regions) Those dimensions are fixed and the center expands to take the remaining space. So, you need to at least give a style rule with a height for a starting point. Your splitter can let the user resize.