Get rid of right border of list item

Webix JS
#1

Hello everybody!

I can’t manage to get rid of right 1px border of my custom list item. I’ve done a breadcrumbs upper block for my deep nested data tree. Everything looks as I want except thin right border.

My list view has the next code:

          {
            view: 'list',
            layout: 'x',
            scroll: false,
            css: 'equipment-window-breadcrumbs',
            borderless: true,
            data: [
              { id: 1, value: 'AAAA' },
              { id: 2, value: 'BBBBBB' },
              { id: 3, value: 'CCCCCC' },
              { id: 4, value: 'DDDDD' },
              { id: 5, value: 'EEEEEEEEE' },
            ],
            template: '{common.icon()}</span><span class="title">#value#</span>',
            type: {
              icon: function(obj) {
                return obj.id === 1
                  ? '<span class="mdi mdi-folder-open">'
                  : '<span class="mdi mdi-triangle">'
              },
            },
          },

And CSS code for it is:

.equipment-window-breadcrumbs .webix_list_item {
  cursor: default;
  padding: 0;
}

.equipment-window-breadcrumbs .title {
  box-sizing: border-box;
  display: inline-block;
  height: 96%;
  padding: 2px 0 0 0;
  vertical-align: middle;
}

.equipment-window-breadcrumbs .title:hover {
  cursor: pointer;
  background: #f4f5f9;
}

.equipment-window-breadcrumbs .mdi {
  margin: 0 8px;
}

.equipment-window-breadcrumbs .webix_list_item .mdi-folder-open::before {
  transform: scale(1.2);
}

.equipment-window-breadcrumbs .webix_list_item .mdi-triangle::before {
  transform: scale(.8) rotate(90deg);
}

But when I debug code with browser’s DevTools, I see that style .webix_list-x .webix_list_item is applied.
boreder

Is there any method to set this border off?

#2

Greetings!

It’s possible to achieve the desired result via CSS. Please, check an example: Code Snippet

1 Like
#3

@AlenaLisava, thank you very much for your answer. I’ve used your approach and the result is great! Breadcrumbs look exactly as I want! :+1: