Bits: Prototype UI Content

Test three 2-panel views, one fixed and two with splitter drag and panel click events.

Content pages like this are designed to be inserted into a wrapper page's iframe. So, they don't have menus. Their wrappers are part of a thread, but they are not.

However, this prototype page is part of the "Prototype thread" and so we provide thread navigation links to be used when viewing this content unwrapped: Prev Next

If you see a top and bottom menu, this page is wrapped, so use those menu controls.

1.0 Test Three Panel Widgets

Fixed panel widths are fixed by width style for left panel.

/*------------------------------*/
  code here

text here and more and more and more and more and more and more and more and more and more

Alter synchronized panel widths by dragging splitter bar or clicking in either panel to expand that panel's width. Default widths are set by setting width style on left panel.

This panel view is wrapped with a flex container and the right panel is set to fill space not occupied by left panel. The left panel has white-space:pre style, the right is a simple div, so text will wrap.

The intent is to show code in the left panel and the right holds explanatory text.

/*------------------------------*/
  code here
  and here
  --

/*------------------------------*/
Some explanatory text here
and here
---
Note: This panel uses style white-space:nowrap
That means that most styles are enforced.

The panel view below is wrapped with a flex container and the right panel is set to fill space not occupied by left panel. Both left and right panels have white-space:pre style.

The intent is to show code in the left panel and output in the right, both with syntax highlighting.

/*------------------------------*/
  code here
  and here
  --

/*------------------------------*/
  output here
  and here
  ...
  Note: this panel uses style white-space:pre
  That means that almost all other styles are ignored