This is a migrated thread and some comments may be shown as answers.

splitter not working

9 Answers 164 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Chau
Top achievements
Rank 1
Chau asked on 01 Feb 2018, 05:41 PM

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!

 

9 Answers, 1 is accepted

Sort by
0
Chau
Top achievements
Rank 1
answered on 01 Feb 2018, 07:28 PM

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.

0
Ivan
Telerik team
answered on 02 Feb 2018, 09:44 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chau
Top achievements
Rank 1
answered on 02 Feb 2018, 05:05 PM
it's all good for now. Thanks!
0
Chau
Top achievements
Rank 1
answered on 21 Sep 2018, 10:22 PM

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>

 

0
Chau
Top achievements
Rank 1
answered on 24 Sep 2018, 06:12 PM

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.

 

0
Chau
Top achievements
Rank 1
answered on 25 Sep 2018, 02:58 AM

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?

0
Ivan
Telerik team
answered on 25 Sep 2018, 03:36 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Chau
Top achievements
Rank 1
answered on 27 Sep 2018, 08:55 PM

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!

0
Ivan
Telerik team
answered on 01 Oct 2018, 08:44 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Chau
Top achievements
Rank 1
Answers by
Chau
Top achievements
Rank 1
Ivan
Telerik team
Share this question
or