Fields layout horizontal

Kirby 4 Question❓
1

Hi,
I’ve created a button plugin. Now I’d like to align two or more buttons horizontally in my panel column/section.
What’s the best approach: fiddling with columns in blueprint or manual css(flex) styling.
Excerpt of my blueprint below as also a screenprint.
Thanks for any advice.

 - width: 1/3
    sections:
      allelessen:
        label: Lessen van {{page.title}}
        type: pages
        headline: Lessen
        status: all
        templates:
          - les

      buttonSection1:
          type: fields
          fields:
            maakknop:
              type: flexbutton
              btext: Maak!
              actiontype: create
              bicon: add
              bcolor: "background: var(--color-green-400); color: var(--color-green-1000)"
            delknop:
              type: flexbutton
              btext: Verwijder!
              actiontype: delete 
              bicon: remove
              bcolor: "background: var(--color-red-400); color: var(--color-red-1000)"

kirby-buttons-horizontal
kirby-buttons-horizontal806×1292 20.2 KB

2

You can add width: 1/2 to each button field to put them on the same line, provided there is enough space to accomodate them.

3

Hi Sonja,

Thanks again for the fast response :pray:
This doesn’t do the trick. I’ve got 3 columns, probably the space is not enough for the buttons. When I scale back to 2 columns then it works.
I’ll try to figure out how to address this by css flexbox. I’ll post my findings if I succeed.
Again thanks a lot.

Mark

btw below my full blueprint

title: Lesgroep
columns:
  - width: 1/3
    sections:
      content:
        type: fields
        fields:
          startdatum:
            label: 1e les op
            type: date
            time: true
            display: DD-MM-YYYY
            autofocus: true
          einddatum:
            label: Laatste les op
            type: date
            display: DD-MM-YYYY
            time: true
          locatie:
            label: Locatie
            type: select
            options: query
            query: site.find('clubs').children.published
          trainer:
            label: Trainer
            type: select
            options: query
            query: site.find('trainers').children.published

  - width: 1/3
    sections:
      groupMembers:
        type: fields
        fields:
          groepsleden:
            label: Groepsleden in {{page.title}}
            type: structure
            fields:
              groepslid:
                label: Groepslid
                type: select
                options: query
                query: site.find('deelnemers').children.published
  - width: 1/3
    sections:
      allelessen:
        label: Lessen van {{page.title}}
        type: pages
        headline: Lessen
        status: all
        templates:
          - les

      buttonSection1:
          type: fields
          fields:
              maakknop:
                width: 1/2
                type: flexbutton
                btext: Maak!
                actiontype: create
                bicon: add
                bcolor: "background: var(--color-green-400); color: var(--color-green-1000)"
              delknop:
                width: 1/2
                type: flexbutton
                btext: Verwijder!
                actiontype: delete 
                bicon: remove
                bcolor: "background: var(--color-red-400); color: var(--color-red-1000)"
4

Ok, I’ve implemented a temporary solution which is very specific, until I find a more generic approach this will do.

Kirby is using the section name identifying the blueprints section as a css class (luckily). In this way I can use this to add some custom css to reposition the buttons. In this case I named my section: “buttonSection1”, this is the top class I use to re-arrange the buttons with flex-css. See results below.

Ideally I would like to use a more generic approach whereas I could align the fields/buttons by a property from within the blueprint button definition. Ore maybe create a custom section like a “toolbar” section and arrange things there… anyhow I have to dive into Vue and Kirby more…

kirby-buttons-horizontal-2
kirby-buttons-horizontal-2980×1058 43 KB

kirby-buttons-horizontal.-3png
kirby-buttons-horizontal.-3png746×1040 15.7 KB

my css code:

.k-section-name-buttonSection1 .k-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start; /* Align items to the left */
}

.k-section-name-buttonSection1 .k-grid .k-column {
    flex: 1 0 auto; /* Grow to fit content, no shrinking, initial size based on content */
    max-width: 90px; /* Adjust this based on the expected width of your buttons */
    margin-right: 10px; /* Reduce the space between buttons */
}

.k-section-name-buttonSection1 .k-grid .k-column:last-child {
    margin-right: 0; /* Remove margin for the last column */
}

.k-section-name-buttonSection1 .k-grid .k-column .k-button {
    min-width: 120px; /* Minimum width for buttons */
    width: auto; /* Allow buttons to size based on content */
}

.k-section-name-buttonSection1 .k-grid .k-column .k-button .k-button-text {
    text-overflow: clip; 
    white-space: nowrap;
}