Configuration to display help text for panel fields above the field?

Kirby 2 Solved ✅
1

When building out panel blueprints, I realized that some of the fields I want to include help text for are rather tall, and I would rather display the help text above those fields instead of below it. Is this possible?

The current issue is structure fields, which is probably OK as there is also help text directly in the individual item fields, but I’d like this flexibility if it’s available.

2

But this solution would change it for every field.

Come to think of it two years later, you could probably even add an option position and then change the order of elements depending on that option.

3

Ooh, that might help. I’ll look into that.

4

It would also be possible to use css to change the order. I have not tested this everywhere so the selectors might need to be more specific to not mess things up at other places.

.field-grid-item {
  display: flex;
  flex-flow: column;
}

.field-grid-item > * {
  flex: 0 0 auto;
  order: 10;
}

.field-grid-item .field-help {
  order: 1;
}

.field-grid-item .label {
  order: 0;
}

/* Prefixed */
.field-grid-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
}

.field-grid-item > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}

.field-grid-item .field-help {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.field-grid-item .label {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
}