Editor - Wrap editor-field in Bootstrap input-group

Editor - Wrap editor-field in Bootstrap input-group

PietervdwPietervdw Posts: 3Questions: 2Answers: 0
edited February 2019 in Free community support

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!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

This discussion has been closed.