Bootstrap 4输入组和jQuery Iris颜色选择器目标选项

Question

在我的目标#color_picker输入上使用iris时，在我的#color_picker输入之后插入颜色选择器，这会破坏颜色选择器的样式，因为bootstrap 4 input group的样式使用flex。

请参阅我的小提琴，以查看由于引导程序4输入组flex css而造成的外观不好。https://jsfiddle.net/joshmoto/gvj1o5ac/（请参阅问题末尾的注释）

我希望能够控制虹膜在调用时在哪里插入拾色器托盘html。

在阅读iris documentation target之后，我唯一能看到的东西使我能够控制它。所以我尝试了这个选项（see fiddle）。

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

full code below只是导致错误，我找不到在其他地方定位或插入颜色选择器的方法。

$('#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中的输入组之外。

..它看起来像下面的屏幕截图一样甜美，因此为什么我要重新定位插入/附加的位置。

此外，如果您知道引导程序4，则会注意到输入的右侧边界半径丢失了。这是因为输入组样式知道输入之后有一个子元素。因此为什么会丢失这些半径。