The controls resizing is made using the resizable jQueryUI plugin. You can define or change the resizing behavior using the handles method.

The layout you see in the demo projects is provided just as a sample. You can place Active Query Builder controls on the web page the way you like. The ObjectTreeView, SubQueryNavigationBar, Canvas (Design Pane), Grid (Query Columns Grid), StatusBar, and SqlEditor controls can be placed on tabs, into hidden divs, or even removed from the page.

The default layout is composed of the following HTML and CSS code. 

If you want to override it, you can do this by writing the custom HTML, CSS, and JavaScript code with one nuance: if you need to perform specific manipulations with layout opened on a mobile device, define the updateLayout method in the AQB.Mobile namespace which accepts an instance of the QueryBuilder object as the parameter:

window.AQB.Mobile = {
    updateLayout: function(qb) {
        // qb is an instance of the initialized QueryBuilder object
    }
};

The default layout source code

HTML:

@controls.GetHtml()
<div class="qb-ui-layout">
    <div class="qb-ui-layout__top">
        <div class="qb-ui-layout__left">
            <div class="qb-ui-structure-tabs">
                <div class="qb-ui-structure-tabs__tab">
                    <input type="radio" id="tree-tab" name="qb-tabs" checked />
                    <label class="ui-widget-header qb-widget-header" for="tree-tab">Database</label>
                    <div class="qb-ui-structure-tabs__content">
                        @controls.ObjectTreeView().GetHtml()
                    </div>
                </div>
            </div>
        </div>
        <div class="qb-ui-layout__right">
            @controls.SubQueryNavigationBar().GetHtml()
            @controls.Canvas().GetHtml()
            @controls.StatusBar().GetHtml()
            @controls.Grid().GetHtml()
        </div>
    </div>
    <div class="qb-ui-layout__bottom">
        @controls.SqlEditor().GetHtml()
    </div>
</div>

jQueryUI resizable:

$('.qb-ui-layout').resizable({ handles: "s" });
$('.qb-ui-canvas').resizable({ handles: "s" });
$('.qb-ui-tree-view').resizable({ handles: "e" });

CSS:

.qb-ui-layout {
  position: relative; }
  .qb-ui-layout__left {
    height: 640px;
    width: 254px;
    min-width: 254px;
    float: left; }
    .qb-ui-layout__left .ui-resizable-e {
      right: -5px;
      background: url(/ActiveQueryBuilder/Handler/resources/svg/splitter);
      background-repeat: no-repeat;
      background-position: center; }
  .qb-ui-layout__right {
    height: 640px;
    margin-left: 257px;
    overflow: hidden;
    display: flex;
    flex-direction: column; }
    .qb-ui-layout__right .qb-ui-canvas-navbar {
      position: relative; }
    .qb-ui-layout__right .qb-ui-canvas {
      height: 437px; }
    .qb-ui-layout__right .ui-qb-grid {
      height: auto;
      width: calc(100% - 2px);
      flex-basis: 0px;
      flex-grow: 1; }
  .qb-ui-layout__top::after {
    content: "";
    display: table;
    clear: both; }
  .qb-ui-layout__bottom {
    border: 1px solid #eaeaea;
    margin-top: 2px; }

.qb-ui-structure-tabs {
  position: relative;
  overflow: hidden;
  height: 100%; }
  .qb-ui-structure-tabs__tab {
    display: inline-block;
    margin-right: 10px; }
    .qb-ui-structure-tabs__tab > label {
      display: inline-block;
      position: relative;
      padding: 8px 0 7px 11px;
      border-radius: 3px 0 0 0;
      border: none !important;
      background-image: none;
      font-family: "Roboto", sans-serif;
      color: white;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      z-index: 0; }
      .qb-ui-structure-tabs__tab > label::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 1000px;
        height: 5px;
        background: inherit;
        background-image: none; }
      .qb-ui-structure-tabs__tab > label::after {
        content: '';
        position: absolute;
        top: 0px;
        right: -13px;
        height: 100%;
        width: 21px;
        border-radius: 0 5px 0 0;
        transform: skewX(25deg);
        background: inherit;
        background-image: none;
        z-index: -1; }
  .qb-ui-structure-tabs__content {
    display: none;
    position: absolute;
    left: 1px;
    top: 42px;
    width: calc(100% - 1px);
    background-image: none;
    box-shadow: 0 -40px 20px -5px rgba(0, 0, 0, 0.25);
    border: none;
    z-index: 1; }
  .qb-ui-structure-tabs input[type='radio'] {
    display: none; }
    .qb-ui-structure-tabs input[type='radio']:checked ~ .qb-ui-structure-tabs__content {
      display: block; }
    .qb-ui-structure-tabs input[type='radio']:checked ~ label {
      z-index: 2; }
    .qb-ui-structure-tabs input[type='radio']:checked::after {
      background: red; }
  .qb-ui-structure-tabs .qb-ui-tree-view,
  .qb-ui-structure-tabs .qb-ui-user-queries {
    height: 600px; }

.qb-widget-header {
  background: #3d566d;
  color: #fff; }

.qb-widget-content {
  border: 1px solid #aaa;
  background: #fff;
  color: #222; }