JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by chrischilcoat

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="ybx-ElementOptions" class="ybx-builder ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-tabs-panel ui-corner-bottom" style="display: block;" aria-labelledby="ui-id-12" role="tabpanel" aria-hidden="false"><input type="hidden" value="childev__yakabod__net____Bread__of__Life____adsfasdfasdf____SELECT_12" name="fieldName"><input type="hidden" value="select" name="type"><input type="hidden" name="selectRowCount" id="selectRowCount" value="2"><input type="hidden" value="" name="refNodeName"><input type="hidden" value="" name="refNodeType"><input type="hidden" value="append" name="insertPosition"><input type="hidden" value="update" name="formAction"><table border="0" cellpadding="8" width="100%" class="ui-webform-wrapper">
        <tbody>
          <tr>
            <td class="ui-webform-label" width="20%" align="left" valign="middle">Label:</td>
            <td class="ui-webform-field" width="80%" align="left"><input type="text" value="" name="componentLabel"></td>
          </tr>
          <tr class="ui-webform-seporator"><td class="ui-helper-reset" colspan="2"><hr></td></tr>
          <tr>
            <td class="ui-webform-label" align="left" valign="middle">Options:</td>
            <td class="ui-webform-field" align="left">
              
                  	&nbsp;<input type="checkbox" name="selectMulti" value="yes"><strong>Multi Select</strong><table border="0" cellpadding="0" cellspacing="0">
                <tbody><tr>
                  <td colspan="3"><input type="hidden" id="selectSize" name="selectSize" size="2" value="1"></td> 
  ...

SCSS

body { 
  padding:50px;
}

body {
	margin: 0;
	padding: 0;
	text-align: left;
	background: #f2f2f2; /* need to add a default for ybx pages even when another theme is picked. */
	}

#containerMax { 
	max-width: 130em; 
	min-width:76em; 
	margin: 0 auto; 
	}

.site .ui-yakabox-layout-twoColFixLtHdr #globHeader, 
.site  #globHeader {
	position:static;
	}
	
.ui-yakabox-layout-twoColFixLtHdr #globHeader, 
#globHeader {
	width:100%;
	position:fixed;
	height:6.2em;
	z-index:1001;
	padding-left: 0;
	padding-right: 0;
 *left:0;
	background-position:bottom;
	box-shadow:2px 0 4px rgba(0, 0, 0, 0.5);
	}

.ui-yakabox-layout-twoColFixLtHdr #globNavBar, 
#globNavBar {
	min-width:70em;
	max-width: 89em;
	width:auto;
	padding:0 3em 0 2em;
	margin:5px auto 0;
  }
	
.site .ui-yakabox-layout-twoColFixLtHdr #container, 
.site #container {
	padding-top:.5em;
	}
.ui-yakabox-layout-twoColFixLtHdr #container,  
#container {
	text-align: left; /* this overrides the text-align: center on the body element. */
	min-width:81em;
	max-width: 89em;
	width:auto;
	margin-left: auto;
	margin-right: auto;
	padding-top:6.2em;
	padding-right:1em;
 *position:relative;
	}
	
.site #container, #container {
	position:static;
	}

.ui-yakabox-layout-twoColFixLtHdr #mainCol,
.ui-yakabox-layout-twoColFixLtHdr .ui-yakabox-status-widget-input, 
.ui-yakabox-layout-twoColFixLtHdr #mainFoot, 
.ui-yakabox-layout-twoColFixLtHdr #mainHdr {
 *margin-left: .92%;
 *margin-right: .92%;
	background-image: none;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	margin-left: 15em;
	margin-right: 0;
	width:74em;
	padding:0;
	/* position:relative; */
	z-index:-1;
	}
	
.ui-yakabox-layout-twoColFixLtHdr #mainCol {
	z-index:999;	
	}
	
.ui-yakabox-layout-twoColFixLtHdr #mainHdr {
	z-index:1000;
	margin-bottom:-.4em;
	}

.ui-yakabox-layout-twoColFixLtHdr #mainFoot {
	z-index:1000
	}
	
.ui-yakabox-layout-twoColFixLtHdr #navCol {
	z-index:1000
	}
	
.ui-yakabox-layout-twoColFixLtHdr #mainFoot...

JavaScript

$('input#checkBoxLayout').on('change', function() {

  $('.ui-builder > div.row').toggleClass('ui-builder-has-layout');
});