Reposition checkbox from below label

Hi all

I thought this might have been answered previously but can’t find the solution if it has and attempts with AI have been unsuccessful.

How do you reposition the checkbox from below the label to be to the left of it?

Regards
Dean

Hi @Dean2

This should do it:

All checkboxes in the view:

#view_123 .kn-label,
#view_123 .kn-checkbox {
    display: inline-block;
}

For a specific field:

#kn-input-field_123 .kn-label,
#kn-input-field_123 .kn-checkbox {
    display: inline-block;
}

You may need to add margin to the checkbox so the label doesn’t but up to the checkbox

#kn-input-field_123 .kn-checkbox {
    margin-right: 15px;
}

Hope this helps

Craig

Hi Craig

Thank you for that suggestion.

I pasted it into the Javascript and got the red warning on the # so then tried it in the CSS but it didn’t work.

Regards
Dean

Hi Dean

Sorry should have been more specific. This is css.

Just to confirm you replaced your view or field id?

Hi Craig

Yes, I did.

That said some weird things were going on this morning with our Javascript & we lost KTL which we eventually got back working. Maybe I’ll try again later.

Regards
Dean

Hi

The only code that I got to move the checkbox was the following but it moves the checkbox to the right of the label and still on the line below.
#view_1815 label.option.checkbox {
display: flex;
flex-direction: row-reverse; /* Moves checkbox before text /
align-items: center;
gap: 6px; /
Adjust spacing between checkbox and text */
}

Regards
Dean

Hi Dean

Can you show me what you are trying to do. I might be misunderstanding what you are trying to do. As default knack have the check boxes like this:

image

Craig

Hi Craig

Sorry, I should have been clearer. I’m wanting to prepend the checkbox to the label to use the screen space more efficiently, as this form will be used on a tablet or smart phone.

Regards
Dean

Hi

I’m making some progress albeit very slowly. The reason for the lack of progress with AI is that we’ve finally determined that there is a conflict somewhere in my Javascript, and I now need to debug it. For reference this is the code supplied that prepended the checkbox for just 1 field.

$(document).on(‘knack-page-render knack-view-render.view_1815’, function(event, view) {
function moveCheckbox() {
// Get the container
const container = $(‘#kn-input-field_1967’);

if (container.length) {
  console.log('Found container');
  
  // Get the elements we need
  const mainLabel = container.find('label.kn-label');
  const checkbox = container.find('input[type="checkbox"]');
  const emptyLabel = container.find('label.option.checkbox');
  const span = mainLabel.find('span');
  
  if (checkbox.length && mainLabel.length) {
    // Remove checkbox and empty label from current location
    checkbox.detach();
    emptyLabel.detach();
    
    // Move empty label first, then checkbox, before span
    mainLabel.prepend(emptyLabel);
    emptyLabel.after(checkbox);
    
    console.log('Checkbox repositioned');
  }
}

}

// Try immediately
moveCheckbox();

// Also try after a short delay
setTimeout(moveCheckbox, 250);
});

Dean

Apologies for a potentially silly question here @Dean2 - your form appears to have checkbox fields with blank checkbox text set for each field? You could easily set each field with the text your need in the tables, then on the page have a blank label and then no code is required?

1 Like

Hi Brad

You’re a champion!

That wasn’t a silly question at all. That’s exactly what I was wanting to achieve.

Thank you so much.

Regards
Dean

1 Like