Our flexible Kanban board for managing tasks with drag drop


Post by swarsap »

Hi there,

Has anyone seen the following issue or does anyone have a solution for the following issue. I'm importing the normal javascript and css files within to my project, but when hovering over an image to get the resources name, the box spans the whole length of the screen, I've added no extra css to this element so it's happening just with the out of the box implementation. see below screenshots.

hover issue 1.png
hover issue 1.png (14.32 KiB) Viewed 1082 times
hover issue 2.png
hover issue 2.png (25.02 KiB) Viewed 1082 times

i can provide mark up if needed, and anything else you need

Many thanks

Steve


Post by marcio »

Hey Steve,

Can you provide the markup that you're using there? Perhaps you could try to reproduce that behavior in one of our demos as well, to facilitate checking where is the possible issue happening.

At first sight, that could be a CSS issue, but without seeing the code structure/classes applied, is difficult to be sure about that.

Best regards,
Márcio


Post by swarsap »

<link href="scripts/css/select/select2.min.css" rel="stylesheet" />
<script src="scripts/javascript/select/select2.full.min.js"></script>

<script type="text/javascript" src="/scripts/javascript/mentions/jquery.events.input.js"></script>
<script type="text/javascript" src="/scripts/javascript/mentions/jquery.elastic.js"></script>
<script type="text/javascript" src="/scripts/javascript/mentions/jquery.mentionsInput.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxdropdownbutton.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxcolorpicker.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxwindow.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxeditor.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxdata.js"></script>

<link rel="stylesheet" href="/scripts/css/jqWidgets/jqx.base.css" type="text/css" />

<script type="text/javascript" src="/common/javascript/bryntum/taskboard/taskboard.module.js"></script>
<link rel="stylesheet" href="/scripts/css/bryntum/taskboard/taskboard.stockholm.css" type="text/css" media="all" />

<script type="text/javascript" src="/scripts/kanban/kanban_omg.js"></script>

<link rel="stylesheet" href="/css/bryntumKanban/kanban_omg.css" type="text/css" />

<div id="kanban"></div>

<div id="right_content_nav" class="right_content_hide" style="padding-left:10px;"></div>

<% INCLUDE "include/upload_hidden_inputs.tt" %>

<div>
	<input type="hidden" id="customer_id" name="customer_id" value="<% planning.customer_id %>">
	<input type="hidden" id="category_id" name="category_id" value="<% planning.owner_org_id %>">
	<input type="hidden" id="category_name" name="category_name" value="<% planning.owner_org_name %>">
	<input type="hidden" id="id" name="id" value="<% planning.id %>">
	<input type="hidden" id="parent_plan_security_level" name="parent_plan_security_level" value="<% planning.security_level.join(',') %>">
</div>

<script type="module">
    import { TaskBoard, Widget, TaskBoardLinked, Field, DomHelper,  StringHelper, ProjectModel, TaskModel, DependencyModel, ResourceModel, DateHelper, LocaleManager, TaskTooltip, WidgetHelper, Toast } from '/common/javascript/bryntum/taskboard/taskboard.module.js';

// A custom widget showing all team members
class TeamMembers extends Widget.mixin(TaskBoardLinked) {

	static $name = 'TeamMembers';
	static type = 'teammembers';

	// Hook in after the widget is configured
	afterConfigure() {
		super.afterConfigure();

		// TaskBoard is created after us, bind to it later
		this.setTimeout('lateInit', 0);
	}

	// Called a while after construction, to attach to TaskBoard
	lateInit() {
		// Redraw on any resource store change
		this.taskBoard.project.resourceStore.on({
			change  : 'recompose',
			thisObj : this
		});

		this.recompose();
	}

	// Function that populates the widget with contents, returns a DomConfig which in the end will be applied as HTML
	compose() {
		const { taskBoard } = this;

		if (taskBoard) {
			return {
				// Create one image per resource
				children: taskBoard.project.resourceStore.map(resource => ({
					tag: 'img',
					src: taskBoard.resourceImagePath + (resource.image ? resource.image : 'none.png'),
					dataset: {
						// Localized tooltip
						btip : StringHelper.xss`${this.L(`${resource.name}`)}`
					},
					elementData : {
						// Tag along the resource, to simplify our click handler below
						resource
					}
				})),
				listeners : {
					// Only care about events originating from the resource images
					delegate : 'img',
					click(event) {
						// Extract the resource we tagged along above
						const { resource } = event.target.elementData;

						// Select all assigned tasks (data layer is shared with Scheduler, which uses the term "event")
						this.taskBoard.selectedTasks = resource.events;
					}
				}
			};
		}
	}

	updateLocalization() {
		this.recompose();
	}
} // end class

TeamMembers.initClass(); // Importing custom locales

var kanban = <% kanban %>,
	kanbanResources = <% kanban_resources %>,
	kanbanResourceAssignment = <% kanban_resource_assignment %>;

const taskBoard = new TaskBoard({
	appendTo: "kanban",
	resourceImagePath : window.location.origin,
	features: {
		taskDrag: true,
		taskEdit: {
			editorConfig: {
				modal: false
			}
		},
		taskMenu: false,
		columnHeaderMenu: false
	},
	//Using taskboard's taskRenderer method to set status and status_color attributes in task header
	taskRenderer({ cardConfig, taskRecord }) {
		cardConfig.children.header.status = taskRecord.status;
		cardConfig.children.header.status_color = taskRecord._status_colour;	  
	},
	footerItems: {
		_required_by_date: { type: 'text', format: "dd mmm yyyy"}
	},
	responsive: {
		medium: {
			when: 600,  // when width <= 600,  Configs applied for this state
			footerItems: {
				'_required_by_date > resourceAvatars' : { hidden : true } //_required_by_date from cards
			},
			cardSizes: [
				{ name : 'medium' }
			],
			headerItems : {
				_workflow_status_name: { hidden: true } // hide _worlk_flow_status_name from cards
			}
		}
	},
	columnField: 'status',
	columns: [
		'To do',
		'In progress',
		'In approval',
		'Approved',
		'Complete'
	],
	project: {
		tasks: kanban,
		resources: kanbanResources,
		assignments: kanbanResourceAssignment
	},
	tbar: [{
		type : 'teammembers'
	}
]

});
</script>



Post by mats »

This looks like a CSS conflict with your other CSS imports, try removing them all and see if that helps?


Post by swarsap »

Will test and feedback tomorrow


Post by marcio »

Thanks swarsap, we'll be waiting for your feedback!

Best regards,
Márcio


Post by swarsap »

So removed all the js and css from the other libraries that was running on the page and the issue is still present... any ideas


Post by tasnim »

Hi,

Then, could you please upload a runnable test case that we can run, reproduce and debug it?


Post by swarsap »

I will see what i can do over the next day or two in regards to this


Post by marcio »

Thanks swarsap, we'll be waiting for the test case.

Best regards,
Márcio


Post Reply