Select2 Dropdown Position Issue

by thomas_david88

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<title>SELECT222</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />

	<link rel="stylesheet" href="select222.css">
	<link rel="stylesheet" href="">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
	</head>
<body>
	<div class="container">
		<div class="row">
		<h4>checkbox</h4>
			<select class="js-select2" multiple="multiple">
				<option value="O1"...

CSS

.select2-container,
.select2-container *,
.select2-drop,
.select2-drop * {
  border-color: #ddd;
  border-radius: 0;
  border-style: solid;
  border-width: 0;

  cursor: pointer;

  line-height: 1;

  outline: none;
  overflow: hidden;

  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;

  white-space: nowrap;
  
  box-sizing: border-box;
  
  user-select: none;
}

.select2-container,
.select2-drop,
.select2-drop-mask {
  background-color: #fff;
  overflow: visible;
}

.select2-container .select2-choice {
  display: block;
  height: 26px;
  padding: 8px;
  position: relative;
  border-width: 1px;
  text-decoration: none;
}

.select2-container .select2-choice > .select2-chosen {
  margin-right: 26px;
  display: block;
}

.select2-container .select2-search-choice-close {
  position: relative;
  cursor: pointer;
  overflow: visible;
  visibility: hidden;
  float: right;
  text-decoration: none;
}

.select2-container .select2-search-choice-close:after {
  position: absolute;
  font-family: FontAwesome;
  color: #6e6e6e;
  top: 0;
  right: 25px;
  content: "\f00d";
}

.select2-container.select2-container-multi .select2-search-choice-close {
  float: none;
}

.select2-container.select2-container-multi .select2-search-choice-close:after {
  right: 4px;
}

.select2-container.select2-allowclear .select2-choice:hover .select2-search-choice-close,
.select2-container.select2-container-multi .select2-search-choice-close {
  visibility: visible;
  filter: alpha(opacity=100);
  opacity: 1;
}

.panel-heading > .select2-allowclear {
  font-size: 1em;
}

.select2-container.select2-hide-arrow.select2-allowclear .select2-search-choice-close:after {
  right: 5px;
}

.select2-container-disabled .select2-search-choice-close,
.select2-container[disabled] .select2-search-choice-close,
.select2-container-multi[disabled] .select2-search-choice-close {
  display: none;
}

.select2-drop-mask {
  border: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  left:...

JavaScript

$(".js-select2").select2({
			closeOnSelect : false,
			placeholder : "Placeholder",
			allowHtml: true,
			allowClear: true,
			tags: true // создает новые опции на лету
		});

			$('.icons_select2').select2({
				width: "100%",
				templateSelection: iformat,
				templateResult: iformat,
				allowHtml: true,
				placeholder: "Placeholder",
				dropdownParent: $( '.select-icon' ),//обавили класс
				allowClear: true,
				multiple: false
			});
	

				function iformat(icon, badge,) {
					var originalOption = icon.element;
					var originalOptionBadge = $(originalOption).data('badge');
				 
					return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '<span class="badge">' + originalOptionBadge + '</span></span>');
				}