Previous / Next

Nested BorderContainers

This is just one example of nested BorderContainers. Many other options are possible.

Create the outer BorderContainer:

  1. Drag a BorderContainer onto the canvas. The Border Container Dialog will pop up.
  2. Select Headline, uncheck the Right pane, and click Ok.
  3. Set the size of each pane as desired.
  4. Turn off the splitters on the top and bottom panes.
  5. (optional) Set the background color on the top, left and bottom panes.

Create the inner BorderContainer:

  1. Drag a BorderContainer onto the canvas. The Border Container Dialog will pop up.
  2. Select Headline, uncheck the Right and Bottom panes, and click Ok.
  3. Under Layout, set box-sizing: border-box. (This will remove the vertical scroll bar.)
  4. Select the left pane.
  5. Under Layout, set width: 50%.
  6. Note: If you set the left pane with the splitter it will set the width using a fixed position, whereas specifying 50% in the width property produces a left pane that is always at 50% regardless of the window size.
  7. Turn off the splitters on the top pane.

Preview in the browser. Resize the left panes by dragging on their borders with your mouse.

Remove the padding on the center ContentPane

Notice that there is a border for the center ContentPane and a border for the nested BorderContainer. These instructions will remove the padding on the center ContentPane so the two borders will collapse into one:

  1. In the Outline palette, select the ContentPane that is the parent of the nested BorderContainer.
  2. Open the Paddings/Margins section of the Properties palette.
  3. Notice the 8px padding. This is set by the theme CSS as the default padding for ContentPanes.
  4. Click on the control to the far right of (padding).
  5. Select the radio button for element.style. This says to "apply my change to just this element".
  6. Set the padding to 0px.
  7. Close Paddings/Margings

Preview in the browser.

Notice that the collapsed border is slightly thicker (2px). This looks pretty good, but if you prefer a 1px border then follow the next steps.

Remove the border on the nested BorderContainer

  1. In the Outline palette, select the nested BorderContainer.
  2. Open the Border section of the Properties palette.
  3. Select show: props.
  4. Notice that the border properties are set to the theme CSS values for BorderContainer borders.
  5. Click on the control to the far right of border-width.
  6. Select the radio button for element.style. This says to "apply my change to just this element".
  7. Set the border-width to 0px.
  8. Close the Border section

Preview in the browser.

Notice that there is no longer a thicker (2px) border. If you prefer the 2px border, here's how you remove changes applied to element.style:

How to remove changes applied to element.style

  1. Select the widget that has the change (the nested BorderContainer).
  2. Go to the property that was changed (border-width).
  3. Select the radio button next to element.style to view the value you wish to remove.
  4. Click on the red X next to element.style.
  5. Preivew in the browser to see the results.

Previous / Next