Field Alignment

Knack Community
1

Hello everyone!

I’m trying to get the Status Date to the right of Status. Similar to how Name is displayed with First, Middle, and Last. I have watched the video, but I can’t figure it out.

idea

Any help would be greatly appreciated!

2

Hi @Kelly,
You can use CSS to position it.
First of all, reduce the status.

To put the date beside the status, you need to put a an empty field or empty title beside the name and then you can drag the status date after the empty field or title.

After this, you can use CSS to push the date closer to the status

3

Hi @Kelly,

Here’s how I do this. You can copy/paste this code into your Custom JavaScript.

$(document).on('knack-view-render.view_29', function (event, view, data) {
  // Call the function when the view renders.
  // Replace the field numbers with your own.
  sameLine(view, ['#kn-input-field_99', '#kn-input-field_111'])
})

// This function will align two fields on the same line
function sameLine(view, fields) {
  if (!$(`#${view.key} ${fields[0]}`).length || !$(`#${view.key} ${fields[1]}`).length) {
    return
  }
  
  // We can align the fields on the same line by wrapping both fields in a div that has display:flex
  $(`#${view.key} ${fields[0]}`).next(fields[1]).andSelf().wrapAll('<div style="display:flex!important;"/>')
  
  // Optional styling; adjust it to your taste.
  $(`#${view.key} ${fields[1]}`).css('margin-left', '0.5em')
  $(`#${view.key} ${fields[0]}`).css('width', '100%')
}
4

You should be able to “drag” the field next to the Name field (or any field at the top position), but you won’t be able to drag the field next to the Status field as that is in the second position.

The trick is to drag the Status field next to Name. Then drag Name to the top - slightly higher than before and you will see a long black line indicating Name is at the very top. Then you should be able to drag Status to the position you wish as now the second positions is a two column arrangement.

1 Like