ngx-bootstrap: Sortable with template (horizontally)

Question

I'm currently having an issue using the ngx-bootstrap sortable component.

I want to be able to use the sortable component horizontally instead of the stacked vertical examples from the doc examples. ngx-bootstrap sortable

Would anyone be able to help out here by providing a potential solution or be able to explain why this may not be possible using ngx-bootstrap.

Answer 1

bs-sortable creates divs internally to show the draggable elements. Now by default the display property of div is block, thats why it is arranged in vertical stack.

To make it horizontal you just need to add the css property display to inline-block in class sortable-item.

Demo

Template

<div class="row">
  <div class="col">
    <bs-sortable
      [(ngModel)]="itemStringsLeft"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
    <pre class="code-preview">model: {{ itemStringsLeft | json }}</pre>
  </div>
</div>

<div class="row">
  <div class="col">
    <bs-sortable
      [(ngModel)]="itemStringsRight"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
    <pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
  </div>
</div>

styles.css

.sortable-item {
    padding: 6px 12px;
    margin: 4px;
    font-size: 14px;
    line-height: 1.4em;
    text-align: center;
    cursor: grab;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #adadad;
    display: inline-block;
}

EDIT:

Rather than making changes in global style.css (which will apply changes globally), if you want to make changes in particular component only, you can use ng-deep pseudo selector in particular component.

app.component.css

bs-sortable::ng-deep .sortable-item {
    padding: 6px 12px;
    margin: 4px;
    font-size: 14px;
    line-height: 1.4em;
    text-align: center;
    cursor: grab;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #adadad;
    display: inline-block;
}