Criteria

Default .e-criteria

<table class="e-criteria">
  <tbody>
    <tr>
      <td id="standard1" width="50" valign="bottom">
        <div class="e-btn e-btn-onlyicon e-btn-secondary">
          <e-icon icon="plus" color="white"></e-icon>
        </div>
      </td>
      <td align="left" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
          <tbody id="table_0_children">
            <tr id="tr_2">
              <td id="td_2" class="e-criteria__item">
                <table width="100%" class="table_condition">
                  <tbody id="table_2">
                    <tr>
                      <td id="td_2_right">
                        <table width="100%">
                          <tbody id="table_2_children">
                            <tr id="tr_1">
                              <td id="td_1">
                                <table width="100%" class="table_crit">
                                  <tbody id="table_1">
                                    <tr>
                                      <td style="white-space: nowrap;">
                                        <select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
                                          <option value>
                                            -- select field --
                                          </option>
                                          <option value="10">
                                            Address
                                          </option>
                                        </select>
                                        <select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
                                          <option value>
                                            N/A
                                          </option>
                                        </select>
                                        <span id="crit_1_td">
                                          <input id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)" class="e-input e-input-large">
                                        </span>
                                      </td>
                                      <td align="right" width="1">
                                        <div class="e-btn e-btn-onlyicon e-btn-secondary">
                                          <e-icon icon="minus" color="white"></e-icon>
                                        </div>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr id="tr_2">
              <td id="td_2" class="e-criteria__item">
                <table width="100%" class="table_condition">
                  <tbody id="table_2">
                    <tr>
                      <td id="td_2_right">
                        <table width="100%">
                          <tbody id="table_2_children">
                            <tr id="tr_1">
                              <td id="td_1">
                                <table width="100%" class="table_crit">
                                  <tbody id="table_1">
                                    <tr>
                                      <td style="white-space: nowrap;">
                                        <select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
                                          <option value>
                                            -- select field --
                                          </option>
                                          <option value="10">
                                            Address
                                          </option>
                                        </select>
                                        <select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
                                          <option value>
                                            N/A
                                          </option>
                                        </select>
                                        <span id="crit_1_td">
                                          <input id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)" class="e-input e-input-large">
                                        </span>
                                      </td>
                                      <td align="right" width="1">
                                        <div class="e-btn e-btn-onlyicon e-btn-secondary">
                                          <e-icon icon="minus" color="white"></e-icon>
                                        </div>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr id="tr_2">
              <td id="td_2" class="e-criteria__item">
                <table width="100%" class="table_condition">
                  <tbody id="table_2">
                    <tr>
                      <td id="td_2_right">
                        <table width="100%">
                          <tbody id="table_2_children">
                            <tr id="tr_1">
                              <td id="td_1">
                                <table width="100%" class="table_crit">
                                  <tbody id="table_1">
                                    <tr>
                                      <td style="white-space: nowrap;">
                                        <select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
                                          <option value>
                                            -- select field --
                                          </option>
                                          <option value="10">
                                            Address
                                          </option>
                                        </select>
                                        <select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
                                          <option value>
                                            N/A
                                          </option>
                                        </select>
                                        <span id="crit_1_td">
                                          <input id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)" class="e-input e-input-large">
                                        </span>
                                      </td>
                                      <td align="right" width="1">
                                        <div class="e-btn e-btn-onlyicon e-btn-secondary">
                                          <e-icon icon="minus" color="white"></e-icon>
                                        </div>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

                        <table class="e-criteria">
                          <tbody>
                            <tr>
                              <td id="standard1" width="50" valign="bottom">
                                <div class="e-btn e-btn-onlyicon e-btn-secondary">
                                  <e-icon icon="plus" color="white"></e-icon>
                                </div>
                              </td>
                              <td align="left" valign="top">
                                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                  <tbody id="table_0_children">
                                    <tr id="tr_2">
                                      <td id="td_2" class="e-criteria__item">
                                        <table width="100%" class="table_condition">
                                          <tbody id="table_2">
                                            <tr>
                                              <td id="td_2_right">
                                                <table width="100%">
                                                  <tbody id="table_2_children">
                                                    <tr id="tr_1">
                                                      <td id="td_1">
                                                        <table width="100%" class="table_crit">
                                                          <tbody id="table_1">
                                                            <tr>
                                                              <td style="white-space: nowrap;">
                                                                <select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
                                                                  <option value="">-- select field --</option>
                                                                  <option value="10">Address</option>
                                                                </select>
                                                                <select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
                                                                  <option value="">N/A</option>
                                                                </select><span id="crit_1_td">
                                                                  <input id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)" class="e-input e-input-large"></span>
                                                              </td>
                                                              <td align="right" width="1">
                                                                <div class="e-btn e-btn-onlyicon e-btn-secondary">
                                                                  <e-icon icon="minus" color="white"></e-icon>
                                                                </div>
                                                              </td>
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                    <tr id="tr_2">
                                      <td id="td_2" class="e-criteria__item">
                                        <table width="100%" class="table_condition">
                                          <tbody id="table_2">
                                            <tr>
                                              <td id="td_2_right">
                                                <table width="100%">
                                                  <tbody id="table_2_children">
                                                    <tr id="tr_1">
                                                      <td id="td_1">
                                                        <table width="100%" class="table_crit">
                                                          <tbody id="table_1">
                                                            <tr>
                                                              <td style="white-space: nowrap;">
                                                                <select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
                                                                  <option value="">-- select field --</option>
                                                                  <option value="10">Address</option>
                                                                </select>
                                                                <select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
                                                                  <option value="">N/A</option>
                                                                </select><span id="crit_1_td">
                                                                  <input id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)" class="e-input e-input-large"></span>
                                                              </td>
                                                              <td align="right" width="1">
                                                                <div class="e-btn e-btn-onlyicon e-btn-secondary">
                                                                  <e-icon icon="minus" color="white"></e-icon>
                                                                </div>
                                                              </td>
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                    <tr id="tr_2">
                                      <td id="td_2" class="e-criteria__item">
                                        <table width="100%" class="table_condition">
                                          <tbody id="table_2">
                                            <tr>
                                              <td id="td_2_right">
                                                <table width="100%">
                                                  <tbody id="table_2_children">
                                                    <tr id="tr_1">
                                                      <td id="td_1">
                                                        <table width="100%" class="table_crit">
                                                          <tbody id="table_1">
                                                            <tr>
                                                              <td style="white-space: nowrap;">
                                                                <select id="field_1" name="field_1" onchange="ChangeElement(1)" class="e-select e-select__select2 e-select-large">
                                                                  <option value="">-- select field --</option>
                                                                  <option value="10">Address</option>
                                                                </select>
                                                                <select id="op_1" name="op_1" onchange="OperatorChanged(1)" class="e-select e-select__select2 e-select-large">
                                                                  <option value="">N/A</option>
                                                                </select><span id="crit_1_td">
                                                                  <input id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)" class="e-input e-input-large"></span>
                                                              </td>
                                                              <td align="right" width="1">
                                                                <div class="e-btn e-btn-onlyicon e-btn-secondary">
                                                                  <e-icon icon="minus" color="white"></e-icon>
                                                                </div>
                                                              </td>
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>

Without table layout

Criterion:
  • Email response (open or click)
  • Responded via email
  • No time restriction
  • Email response (open or click)
  • Responded via email
  • No time restriction
Edit
<div class="e-criteria e-criteria-noscroll">
  <div class="e-criteria__item e-criteria__item-table">
    <div class="e-criteria__title">
      Criterion:
    </div>
    <div class="e-criteria__crits">
      <ul class="e-list">
        <li>
          Email response (open or click)
        </li>
        <li>
          Responded via email
        </li>
        <li>
          No time restriction
        </li>
        <li>
          Email response (open or click)
        </li>
        <li>
          Responded via email
        </li>
        <li>
          No time restriction
        </li>
      </ul>
    </div>
    <div class="e-criteria__actions">
      <div class="e-buttongroup float-right">
        <div class="e-btn">
          Edit
        </div>
        <div class="e-btn e-btn-onlyicon e-btn-secondary">
          <e-icon icon="minus"></e-icon>
        </div>
      </div>
    </div>
  </div>
</div>

                        <div class="e-criteria e-criteria-noscroll">
                          <div class="e-criteria__item e-criteria__item-table">
                            <div class="e-criteria__title">Criterion:</div>
                            <div class="e-criteria__crits">
                              <ul class="e-list">
                                <li>Email response (open or click)</li>
                                <li>Responded via email</li>
                                <li>No time restriction</li>
                                <li>Email response (open or click)</li>
                                <li>Responded via email</li>
                                <li>No time restriction</li>
                              </ul>
                            </div>
                            <div class="e-criteria__actions">
                              <div class="e-buttongroup float-right">
                                <div class="e-btn">Edit</div>
                                <div class="e-btn e-btn-onlyicon e-btn-secondary">
                                  <e-icon icon="minus"></e-icon>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

Criteria

This is a really custom component made for the old Segmentation page.

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history