Группа ввода Bootstrap 4 и опция выбора цвета jQuery Iris

Question

При использовании радужной оболочки на моем целевом входе #color_picker средство выбора цвета вставляется после моего ввода #color_picker, что нарушает стилизацию средства выбора цвета, поскольку группа начальной загрузки 4 ' S стилизованы с использованием flex .

См. Мою скрипку, чтобы увидеть, как плохо она выглядит из-за начальной загрузки 4, группа ввода flex css .. https://jsfiddle.net/joshmoto/gvj1o5ac/ (см. Примечания в конце вопроса)

Я хотел бы иметь возможность контролировать, где радужная оболочка вставляет html палитры палитры цветов при вызове.

После прочтения документации по радужной оболочке target было единственным, что я мог видеть, что могло позволить мне контролировать это. Поэтому я попробовал эту опцию ( см. Скрипку ) ..

target: $(this).parent('.form-group')

Полный код ниже просто вызывает и вызывает ошибку, и я не могу найти способ нацелить или вставить палитру цветов где-то еще.

$('#color_picker').iris({

  // change where iris palette is inserted after
  target: $(this).parent('.form-group'),

  // do stuff when color is changed
  change: function(event, ui) {

    // change the prepend indicator
    $(this).siblings().find('.input-group-text').css('background-color', ui.color.toString());

  }

});

https://jsfiddle.net/joshmoto/at964oz0/ (скрипка для кода выше)

Отрывок

$('#color_picker').iris({

    // do stuff when color is changed
    change: function(event, ui) {

      // change the prepend indicator
      $(this).siblings().find('.input-group-text').css('background-color', ui.color.toString());

    }

});

.input-group-prepend .input-group-text::before  {
  width: 18px;
  content: "";
  display: block;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dev.joshmoto.wtf/iris/dist/iris.min.js"></script>

<!-- Bootstrap input group mark up below -->

<div class="container pt-3">
  <form>
    <div class="form-row">
      <div class="form-group col-5">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" style="background-color:#00e4bc"></span>
          </div>
          <input type="text" id="color_picker" class="form-control form-control-lg" value="#00e4bc" />
        </div>
      </div>
    </div>
  </form>
</div>

Примечание

Вы, вероятно, думаете, что это выглядит не так уж плохо, но иногда это выглядит как на скриншоте ниже, не уверен, почему он выглядит нормально в вопросе, но если вы измените мой фрагмент кода вопроса, он будет выглядеть как ..

Но если я перетаскиваю элемент выбора цвета радужной оболочки вне группы ввода в DOM, используя Chrome инспектор ..

.. тогда это выглядит мило, как на скриншоте ниже, поэтому я хочу переназначить его туда, куда он вставлен / добавлен ..

Также, если вы знаете загрузчик 4, вы заметите, что радиусы правой границы на входе потеряны. Это потому, что стилизация группы ввода знает, что после ввода есть дочерний элемент. Следовательно, почему эти радиусы потеряны.