I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging a handle on the left side. The first DIV on the left cannot be resized, but its size adjusts based on the resizing of the adjacent DIV. This pattern continues along the row, meaning the left-side DIV automatically resizes when the right-side DIV is resized. To achieve this, I am utilizing the Resizable widget in jQuery UI for the basic resizing functionality.
If you'd like to see an example, check out my fiddle at: https://jsfiddle.net/profnimrod/rpzyv0nd/4/
However, I've encountered two issues. Firstly, the draggable handle on the left side of each DIV (excluding the first one) isn't behaving as expected. Secondly, the Fontawesome icon within each DIV (except the first one) that I intend to use as the resize handle is not displaying properly.
Do you have any suggestions on how I could address these problems?
It's worth noting that there is a canvas element positioned behind the row-containing DIV. My plan is to incorporate graphical elements behind the rows in the future, making the row DIVs transparent.
The code snippet I'm working with can be found in the Fiddle link provided:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
... (omitted for brevity)
</script></body></html>