splitter not working

[Chau]

I am trying to use the kendo-splitter component, but the splitter does not show up correctly between left and right pane. Instead, it is at the top left corner when I set orientation=horizontal. I have attached screenshots of both horizontal and vertical orientation of the component on my page.

I can use the kendo-panelbar OK, which indicates I should have 'LayoutModule' correctly installed.

Could someone tell me what I missed? Thanks!

 

[Chau]

I found out that my local Kendo all.css did not have the class k-splitter-flex.

I reran: npm install --save @progress/kendo-theme-default 

and got the good css file.

Splitter bar is showing up OK now.

[Ivan]

Hi Chau,

We are happy to hear, our components are working for you.

Is there anything else we can do about this issue ?

Regards,
Ivan
Progress Telerik

[Chau]

it's all good for now. Thanks!

[Chau]

I had kendo-splitter working fine with my Angular 4 project.

Now that I start a new Angular 6 project, I am running into the splitter not quite working correctly.  When I clicked on the arrow to collapse the pane, the content in the pane is hidden but the space occupied by the pane is still there and displayed as blank space.

I cannot duplicate the issue on the following stackblitz, and I have compared every line of html between the stackblitz page and my Angular 6 page.  The difference I can see is on my Angular 6 application page, there is a "ng-star-inserted" value added in the "class" property of <kendo-splitter>.

Here's the splitter working on stackblitz link:  

https://stackblitz.com/edit/angular-6hsv4b

I'm attaching the debug view of both kendo-splitter element working vs. non-working.

I have installed the same versions of @angular and @progress/kendo-angular-layout as shown on the stackblitz page, but still I can't get my kendo-splitter working correctly.

Do you think the 'ng-star-inserted' value is causing the issue, and how to remove it?

Thank you!

<kendo-splitter orientation="horizontal">

        <kendo-splitter-pane #leftpane [collapsible]="true" max="350px;" [collapsed]="this.showCollectionView == true">
            <table><tr><td>LEFT PANE</td></tr></table>
        </kendo-splitter-pane>
        <kendo-splitter-pane>
            <!-- read somewhere to remove ng-star-inserted, do not use <div *ngIf> and replace with ng-container -->
            <ng-container *ngIf="this.showCollectionView === true">

                <kendo-splitter orientation="vertical" style="width:100%;">

                    <kendo-splitter-pane [collapsible]="true" style="width:100%;">
                        <app-providerfilesgrid [managedCareObj]="this.managedCareObj" >

                        </app-providerfilesgrid>

                    </kendo-splitter-pane>
                    <kendo-splitter-pane #bottomrightpane style="width:100%;">

                        <div class="pane-content" style="height:100px;">
                            <h3>HELLO BOTTOM right pane</h3>
                        </div>
                    </kendo-splitter-pane>
                </kendo-splitter>
            </ng-container>

        </kendo-splitter-pane>
    </kendo-splitter>

 

[Chau]

I found that I was using a customized css, and from previous Telerik support reply, a simple fix would be to add the following style in the component.ts as:

.k-splitter-flex .k-pane[hidden] {

    display: none;

}

This has solved my splitter issue for now since I am reusing an existing customized css.

Another question, I am using VisualCode and LiveSass to compile a custom scss file located inside the folder node_modules\@progress\kendo-theme-default\scss, but I keep getting the error "EISDIR: illegal operation on a directory, read on line 6 of sass/c:\....\all.scss".

I am attaching a screenshot of my scss file. To test if LiveSass could generate css files, I commented the line @import "all", and I saw .css file and .css.map file generated.

Thanks for any advice.

 

[Chau]

I got those 'EISDIR: illegal operation on a directory' errors resolved by prefixing all the scss files in node_modules\@progress\kendo-theme-default\scss with an underscore '_'. 

LiveSass is looking for scss partial files that are going to be imported (@import) to the main stylesheet: all.scss.

Do you know if this is only specific to LiveSass compiler to have the files named with '_' ? Can KendoUI team provide all these files with '_' (except all.scss) since they are supposed to be partial files?

[Ivan]

Hi Chau,

Kendo Themes  can't be customized with such direct approach, please refer to this section of our docs in order to get familiar with the proper way of customizing kendo-theme-default.
Following this article will allow you to build customized theme locally using angular-cli.

Hope this helps. 


Regards,
Ivan
Progress Telerik

[Chau]

Hi Ivan,

I was following the section "Use the Build Process of the Application", i.e. I provide my .scss file (see attached screenshot) and use the LiveSass compiler inside my VisualStudio Code project to generate the customized default theme css.

My .scss file has a few lines as below and is located inside the node_modules\@progress\kendo-theme-default\scss folder:

$grid-alt-bg: lightgoldenrodyellow;

$dialog-titlebar-bg: blue;

@import "all";

Once I renamed all the .scss files (except all.scss) in that kendo-theme-default\scss folder with '_'prefix, then LiveSass could generate my customized default css file successfully. 

Perhaps you can tell me how to generate the customized default css file within a VisualStudio Code project without using LiveSass. Thanks!

[Ivan]

Hi Chau,

We are recommending to use angular-cli in your console in order to build and serve the project.
It will setup the project with desired components and in the produced angular.json file you can point which file to load for the styles.

{
  ....
 styles: [ 'styles.scss']
....
}

There is no need to put your files in the node_modules folder, you just need to import kendo-theme-default in you styles.scss as shown.

// styles.scss
//your code here
$accent: #ff69b4; //variable from theme overridden
@import "~@progress/kendo-theme-default/scss/all";

Thus kendo-theme-default will be part of your build process without any need for additional build steps.

Regards,
Ivan
Progress Telerik