Splitter styles not applied on resize

[Sam Mendes]

Hi,

I used the demos in [https://blazor.syncfusion.com/demos/splitter/expand-collapse] and then tried to style the splitter using the documentation [https://blazor.syncfusion.com/documentation/splitter/style].

I set all the background and colors to violet in the css, but when I resize the splitter the default blue color is displayed.

Evidence [https://gfycat.com/friendlyquerulousbettong].

Please confirm which css styles are missing in the documentation to prevent the default blue color to be displayed.

Thanks,

[Buvana Sathasivam]

Hi Sam,

Greetings from Syncfusion support.

We were unable to replicate your reported problem at our end. In the below sample, we have included the following documentation styles for split bar colours for both vertical and horizontal layouts.

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/V_782022_1540351215060209

<style>

.e-splitter .e-split-bar.e-split-bar-horizontal,

.e-splitter .e-split-bar.e-split-bar-vertical,

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover,

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active,

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover,

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active

{

   background: blue;

}

</style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Net6Server_-_Copy_(6)_-_Copy2113699655

Please check the above sample and let us know if you have faced any problems.

Regards,

Buvana S

[Sam Mendes]

Hi Buvana,

In your example the background color used is blue, so the issue I reported cannot be seen.

I set all the colors in the styles provided in the documentation to violet:

<style>

.e-splitter .content {

padding: 20px;

}

.e-splitter p {

margin-top: 10px;

}

.expand-pane {

margin: 20px auto;

max-width: 820px;

}

/* styles to hide scroll bars */

.expand-pane .e-pane.e-pane-horizontal.e-scrollable::-webkit-scrollbar,

.expand-pane .e-pane.e-pane-vertical.e-scrollable::-webkit-scrollbar {

display: none;

}

.expand-pane .e-pane.e-pane-horizontal.e-scrollable, .expand-pane .e-pane.e-pane-vertical.e-scrollable {

scrollbar-width: none;

-ms-overflow-style: none;

}

/* default split bar color */

.e-splitter .e-split-bar.e-split-bar-horizontal{

background: violet;

}

/* split bar color in hover and active state */

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover,

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {

background: violet;

}

/* default split bar color */

.e-splitter .e-split-bar.e-split-bar-vertical {

background: violet;

}

/* split bar color in hover and active state */

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover,

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {

background: violet;

}

/* default split bar resize handle color */

.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {

color: violet;

}

/* default split bar resize handle color in hover and active state */

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler {

color: violet;

}

/* default split bar resize handle color */

.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {

color: violet;

}

/* default split bar resize handle color in hover and active state */

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-resize-handler {

color: violet;

}

/* split bar arrows */

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right::after {

background-color: violet;

}

/* split bar arrows - circular border */

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right {

border-color: violet;

}

/* split bar arrows */

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up::after, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up::after, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down::after, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down::after {

background-color: violet;

}

/* split bar arrows - circular border */

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down {

border-color: violet;

}

.control-section {

min-height: 370px;

margin-bottom: 15px;

margin-top: 10px;

}

#inner-splitter {

border: transparent;

}

style>

When I resize the splitter the default blue color is displayed in the circular border and the resize handle.

On hover:

On resizing:

I think there are some styles missing in the documentation for the circular border and the resize handle while resizing.

Regards,

[Buvana Sathasivam]

Hi Sam,

Thanks for your update.

We were able to reproduce your reported problem at our end. To solve your problem, you can set the below styles in your application. Please find the below code and sample for your reference.

/* default split bar resize handle color in hover and active state */

 

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {

 

color: violet;

 

}

 

/* default split bar resize handle color in hover and active state */

 

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {

 

color: violet;

 

}

 

/* split bar arrows - circular border */

 

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right,

.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {

 

border-color: violet;

 

}

 

/* split bar arrows - circular border */

 

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down,

.e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {

 

border-color: violet;

 

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Net6Server_-_Copy_(2)_-_Copy315206973

We will include documentation for this style and refresh the live link in any of our upcoming releases.

Please let us know if you have any concerns.

Regards,

Buvana S

[Sam Mendes]

Hi Buvana,

These changes in the styles solved this issue.

Thank you for your help. You can now close this support ticket.

Regards,

[Buvana Sathasivam]

Hi Sam,

You are welcome. Please let us know if you need any further assistance.

Regards,

Buvana S