0

I am really new to angular and to mobile app programming and I would like to ask something about my situation, right now I have this html code:

  <div cdkDropList id="originalList" cdkDropListSortingDisabled [cdkDropListData]="filteredItems"
       [cdkDropListConnectedTo]="connectedDropLists"
       #originalList="cdkDropList"
       class="original-space"
       (cdkDropListDropped)="drop($event)">

    <div class="image-box"  *ngFor="let item of filteredItems" cdkDrag
         (touchstart)="onTouchStart(item)"
         (touchend)="onTouchEnd(item)"
         (cdkDragStarted)="onDragStart($event)"
         (cdkDragEnded)="onDragEnd($event)">
      <img [src]="item.image" alt="{{ item.text }}">
      <div class="description">{{ item.text }}</div>
    </div>
  </div>

And this css code:

.image-box {
  width: 100px;
  height: 100px;
  margin: 25px;

  /* Flexbox properties */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.original-space .image-box {
  width: 32%;
  margin: 0px;
  padding: 25px;
}

.original-space {
  border: 2px dashed #ccc;
  min-height: 125px;
  max-height: 50%;
  width: 100%;
  margin: 20px auto 20px 0;  /* Adjusted margin: top auto, right auto, bottom 0, left 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: scroll;
  flex-wrap: wrap;
}

Along with some other code, but my problem is here, my app right now looks like on a screen that I provided.I do not really know what to do next, the items that you can see are draggable as you can see in the code, so i cant scroll at all, when i just drag them. Vut i need them to be scrollable, scrolling with two fingers (two touch inputs) seems kinda weird (and counterintuitive) and the only thing that i can think of is horizontal scrolling, but I do not really know how to achieve it. Do you have some ideas to help me implement horizontal scrolling? (I tried to do it, but items were only in one row when I tried it to do and I do not know how to fix it) Or some other ideas of what to do in this situations, this is my first app ever.

Screenshot of an app

2
  • Hi Aniruddh, has your problem been solved yet? Maybe I can help you?
    – Tayamba
    Commented Oct 17, 2023 at 11:46
  • Hello, no, I still do not really know how should i approach this problem with slider.
    – AppUser411
    Commented Oct 18, 2023 at 19:03

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.