Multiple inputs in custom field and grid

Kirby 2 Solved ✅
1

Hi,

EDIT: for no reasons it works well when the fields are generated from the PHP class. This allows me to abandon the hard-coded template as well, which is nice.

I’m struggling creating a multi-input custom field. I managed to create multiple texts inputs with a hard-coded template, but they remain in a <div> parent. So when I try to apply grid classes .field-item-grid-1-2 for example, they don’t fit next to each others.

This is what I have right now:

<fieldset class="fieldset field-grid cf">
<!-- … other fields created from the blueprint -->
<div>
<div class="field field-grid-item field-with-headline">…</div>
<div class="field field-grid-item field-grid-item-1-2">…</div> <!-- input 1 -->
<div class="field field-grid-item field-grid-item-1-2">…</div> <!-- input 2 -->
</div>
<!-- … submit button -->
</fieldset>

By analyzing the source at many levels, I understand that I should get out of that <div> element but I can’t find any way to do so. I’ve already tried applying .field-grid to the parent element but it seems that nested grids aren’t natively supported.
Someone might have a hint?

Notes:

  • the result value doesn’t matter, because those fields would only serve JavaScript purposes;
  • this could be solved with CSS, but it would be a very inconsistent fixture regarding the DOM.
2

Looks like I’ve found how to get out of the <div>, by simply overriding the __toString() method like this:

<?php
class CustomField extends BaseField {
  // ...
  public function __toString() {
    return tpl::load(__DIR__ . DS . 'template.php', array('field' => $this));;
  }
}

But the grid system still not work here…

Edit: here’s a screenshot