Premium support for our pure JavaScript UI components


Post by allwd »

Hi,
by default we are using splitter config to be visible on left most side of the screen and it is barely visible this way. Also hovering over it with mouse on touch device doesn't seem to indicate dragging possibility.

  • Is there a simple way to enforce displaying the expand collapse arrows along widened splitter overall?
    I've achieved such result with this CSS, but on touch devices, translate CSS attribute is not calculated until pressing on the splitter and the arrows are displayed on top, not the middle of the splitter. If not, do you know a method I can all at launch to have the splitter transform calculated easily?

    .b-touch {
      .b-grid-splitter {
       overflow: visible;
       .b-grid-splitter-main {
        left: -4px;
        width: 13px;
       }
       
    .b-icon-collapse-gridregion, .b-icon-expand-gridregion { display: block !important; } } }
    • Is there a simple way to fix non displaying of arrows on touch devices with a cursor? You could by default, when creating styles for b-touch descendant classes, also check for cursor: none media query.

    Best regards


Post by Maxim Gorkovsky »

Hello.
I can reproduce this behavior and opened a ticket to fix styling: https://github.com/bryntum/bryntum-suite/issues/2139
You can try this style:

.b-grid-splitter.b-hover .b-icon-expand-gridregion,
.b-grid-splitter.b-hover .b-icon-collapse-gridregion {
  display: inline !important;
}

it will show expand/collapse icons on mouse hover only.
Please let us know if this workaround fixes your issue.


Post by Maxim Gorkovsky »

Here is a correct link to the issue: https://github.com/bryntum/support/issues/1605


Post by allwd »

Hi Maxim,
another issue is when side is collapsed, no arrows are displayed.
Fixed with:

    .b-grid-splitter.b-hover,
    .b-grid-splitter.b-hover, {
        .b-icon-expand-gridregion,
        .b-icon-collapse-gridregion {
            display: inline !important;
        }
    }

.b-touch .b-grid-splitter-collapsed:not(.b-grid-splitter-allow-collapse) .b-icon-expand-gridregion {
    display: inline !important;
}

.b-touch .b-grid-splitter-collapsed.b-grid-splitter-allow-collapse .b-icon-collapse-gridregion {
    display: inline !important;
}

Post Reply