Editor - Wrap editor-field in Bootstrap input-group

Pietervdw

Hi All,

I would like to wrap the editor field inside a Bootstrap input-group element. I need it to show a calendar icon next to the input e.g:

<div class="input-group date">
    <div class="input-group-addon">
        <i class="fa fa-calendar"></i>
    </div>
    <div data-editor-template="TransactionDate"></div>
</div>

Unfortunately, I can't get it to display properly. Is there a way to accomplish this?

Many thanks!

allan

Your best bet here is to use a little CSS to display the icon:

div.DTE_Field_Type_datetime div.DTE_Field_InputControl::after {
  display: block;
  content: ... // Icon data point
  ...
}

The issue with using a template as you have above is that Editor will insert the whole field element there (label, info, error message, etc) not just the input element.

Allan