JSFiddle - React, Tailwind, and code Playground

Select List Fix

by chrischilcoat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox4.9.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/yakabox/ui.themeroller.theme.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/ui.yakabox.contentadd.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/jquery-ui.structure.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/ui-dialog/ui.themeroller.theme.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/bootstrap.css">
<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front formDialog contentAdd ui-draggable ui-resizable" aria-describedby="selectDialog" aria-labelledby="ui-id-4" style=" height: auto; width: 630px;">
  <div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle">
    <span id="ui-id-4" class="ui-dialog-title">Select List Options</span>
    <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close"...

SCSS

.ui-webform-select-list {
  display: inline-block; 
  padding-left: 20px; 
	min-width: 500px;
  
  .ui-icon-grip-dotted-vertical {
      float:left;
  }
  .ui-select-list-label {
      float:left;
  }
  .ui-select-list-content {
      width: 70%;
      margin-left: 10px;
      float:left;
      padding: 1px 2px;
			resize: none;
			overflow: auto;
			text-rendering: auto;
      color: initial;
      letter-spacing: normal;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0px;
      text-shadow: none;
      display: inline-block;
      text-align: start;
			cursor: text;
      font: 400 11px system-ui;
   }
   .ui-select-list-content-short {
   		width: 30%;
   }
   .ui-select-list-delete-icon {
      cursor: pointer;
      float:left; 
      margin-left: 10px;
      margin-right: 10px;
   }
   select {
      float:left;
      width: 40%;
			
   }
}

JavaScript

$("#showContainerBox").change(function() {

  var ischecked = $(this).is(':checked');
  if (ischecked) {
    $("#checked-a, #checked-b, #checked-c").fadeIn(0);
  } else {
    $("#checked-a, #checked-b, #checked-c").fadeOut(0);
  }

});


$(function() {

  var ischecked = $("#showContainerBox").is(':checked');
  if (ischecked) {
    $("#checked-a, #checked-b, #checked-c").fadeIn(0);
  } else {
    $("#checked-a, #checked-b, #checked-c").fadeOut(0);
  }

});




$(function(){
  $("#showContainerBox").change(function() {
    $("#myId, #myId2, #myId3").toggleClass("ui-select-list-content-short", this.checked)
  }).change();
})

$('#selectTargetSection').on( 'change keyup keydown paste cut', 'textarea', function (e){
		if(e.which === 13 || e.keyCode === 13) {
    	e.preventDefault();
    }
    $(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();