Hi Team,
I’m encountering a UI alignment issue when adding a search input at the column level using the columnToolbar feature in the taskboard. The alignment seems off, especially as I’m using multiple fields within the topItems of the columnToolbar.
I’ve attached a screenshot for your reference. Could you please suggest any improvements or adjustments to resolve this?
Thanks in advance for your help!
columnToolbarsFeature: {
topItems: {
// Define a custom text input and search button
searchInput: {
type: 'text', // Input field
placeholder: 'Search tasks...', //🔍
icon: 'b-fa-search',
listeners: {
input({ source }) {
// Capture the input text
const value = source.value.trim().toLowerCase();
const column = source.columnRecord;
const taskBoard = column.taskBoard;
// Iterate through the tasks in the column and highlight matches
column.tasks.forEach((task : any) => {
const taskElement = taskBoard.getTaskElement(task);
if (taskElement) {
// Check all relevant fields for matches
const isMatch = [
task.name,
task.estimatedWorkTime,
"Safety Stock"
].some(field => field?.toString().toLowerCase().includes(value));
if (value && isMatch) {
taskElement.classList.add('highlight');
} else {
taskElement.classList.remove('highlight');
}
}
});
}
}
},
clearButton: {
type: 'button',
icon: 'b-fa-times', // FontAwesome 'times' icon for clear
onClick({ source } : any) {
const searchInput : any = source.previousSibling; // Access the sibling input field
searchInput.value = ''; // Clear the input field
const column = source.columnRecord;
const taskBoard = column.taskBoard;
// Clear highlights if input is empty
column.tasks.forEach((task: any) => {
const taskElement = taskBoard.getTaskElement(task);
if (taskElement) taskElement.classList.remove('highlight');
});
}
}
},
bottomItems: {
addTask : null
}
},
