No default borders around view made as JetView ES6 class

Webix JS
#1

Hi!

I don’t understand why there are no default borders around my customv JetView class. This is the config() method of my view:

config() {
    return {
      type: 'line',
      borderless: false,
      cols: [
        {
          view: 'template',
          css: 'breadcrumbs',
          template: '<span class="mdi mdi-folder-open"></span>',
          height: 38,
          width: 30,
          borderless: true,
        },
        {
          view: 'template',
          name: "breadcrumbs__padder",
          width: 6,
          borderless: true,
        },
        {
          view: 'button',
          css: 'webix_transparent icon-nolabel breadcrumbs__btn',
          type: 'icon',
          icon: 'mdi mdi-menu-down',
          hidden: true,
          width: 20,
          on: {
            onItemClick: this.#showPopup.bind(this),
          },
        },
        {
          view: 'list',
          scroll: false,
          css: 'breadcrumbs-list',
          layout: 'x',
          borderless: true,
          template: '{common.crumb()}',
          autoheight: true,
          type: {
            crumb: function(obj) {
              return obj.crumbId === 0
                ? `<span class="breadcrumbs-list__title">${obj.name}</span>`
                : `<span class="mdi mdi-menu-right breadcrumbs-list__right-triangle"></span><span class="breadcrumbs-list__title">${obj.name}</span>`;
            }
          },
          on: {
            onItemClick: this.#crumbClickHandler.bind(this),
          },
        },
      ],
    }
  };

And I have this result:
crumbs

There are no any border around it.

In browser DevTolls I see that the inline style property border of parent html element of my view is border-width: 0px, I can manually set it to 1px right in DevTools and get fake desired result that resets on next reload.
crumbs2

What do I do wrong?

#2

The documentation is pretty straightforward on this: cells with a border (c)
So this means that unless you add borderless: true to layout cells, the cells will have borders.

To surround this layout itself with a border and keep it’s cells without the borders, you can add view: "proxy" around this layout. Code Snippet

#3

Thank you very much! It works!

1 Like