Horizontal list Element - not scrolling

Mobile Beta
1

Hey guys, i have a horizontal list element added to a sheet, it’s showing the data but it wont scroll left to right. Is there something I’m missing or should this be on a new view and not a sheet?

2

Hey @jacob2,

Add this Javascript in an HTML element in the page:

<script>
/* This function adds a listener for mouse or touch movement specifically when an element with the class ".ui-droppable-active" is being dragged. If this is the case, and the mouse/finger is close to the left or right edge of the "kanban" div, the div will scroll horizontally.

This is specific to the "Draggable Elements" plugin provided by Bubble.
*/
function enableScrollOnDrag() {
  // How close (in pixels) to the edge of the "kanban" div before scrolling starts
  var scrollThreshold_Desktop = 100;
  var scrollThreshold_Mobile = 200;

  // How fast (in pixels) will the div scroll (higher = faster)
  var scrollSpeed_Desktop = 3;
  var scrollSpeed_Mobile = 6;

  $(document).on("mousemove", function (event) {
    var activeElement = $(".ui-droppable-active");
    var kanbanDiv = $("#kanban-scroll"); // Replace "kanban" with the actual ID or selector of your "kanban" div

    if (activeElement.length > 0 && kanbanDiv.length > 0) {
      var kanbanLeftEdge = kanbanDiv.offset().left;
      var kanbanRightEdge = kanbanLeftEdge + kanbanDiv.width();

      if (event.clientX < kanbanLeftEdge + scrollThreshold_Desktop) {
        kanbanDiv.scrollLeft(kanbanDiv.scrollLeft() - scrollSpeed_Desktop); // Scroll "kanban" div horizontally left
      } else if (event.clientX > kanbanRightEdge - scrollThreshold_Desktop) {
        kanbanDiv.scrollLeft(kanbanDiv.scrollLeft() + scrollSpeed_Desktop); // Scroll "kanban" div horizontally right
      }
    }
  });

  $(document).on("touchmove", function (event) {
    var activeElement = $(".ui-droppable-active");
    var kanbanDiv = $("#kanban"); // Replace "kanban" with the actual ID or selector of your "kanban" div

    if (activeElement.length > 0 && kanbanDiv.length > 0) {
      var kanbanLeftEdge = kanbanDiv.offset().left;
      var kanbanRightEdge = kanbanLeftEdge + kanbanDiv.width();

      if (event.touches[0].clientX < kanbanLeftEdge + scrollThreshold_Mobile) {
        kanbanDiv.scrollLeft(kanbanDiv.scrollLeft() - scrollSpeed_Mobile); // Scroll "kanban" div horizontally left
      } else if (event.touches[0].clientX > kanbanRightEdge - scrollThreshold_Mobile) {
        kanbanDiv.scrollLeft(kanbanDiv.scrollLeft() + scrollSpeed_Mobile); // Scroll "kanban" div horizontally right
      }
    }
  });
}

// This calls the function so it actually works on the page
$(document).ready(function () {
  enableScrollOnDrag();
});
</script>

Then add kanban-scroll as the external Repeating Group element ID (or use another and change it in this code at #kanban-scroll).

This will work

3

Hi, I’ve noticed the same behavior on my side. I just made the sheet “not scrollable” and the horizontal list started scrolling.

1 Like
4

This will not work on mobile views

5

I’m able to have horizontal scroll on a scrollable sheet, but having the dual scroll directions makes it a little janky. Do you need the sheet to be scrollable?

1 Like
6

So im trying to have a list of tabs that filter a list below. Cant seem to fogure out how add a filter system to a list view. Maybe just make it visible if the index is 1?

7

Have you tried adding the horizontal list to the list view header area, then setting the data source search constraints to whatever the filters are (ensuring ignore empty constraints is checked)?

1 Like
8

I have not tried that yet I’ll give it a shot thank you

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.