ej-symbolpalette gets hidden when including ej.web.all.min.css file

[Hussain]

Hi,

I've this control in my view:

It works very fine, however, when I include this css file in the project:

@import "../../../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css";

It will get hidden. When inspecting in chrome, I can see it adds the following classes:

class="e-datavisualization-symbolpalette e-js e-scroller e-widget"

when I remove them it shows up again. I can see also that it adds up two divs for vertical and horizontal scrolling (which is not present without adding the css file).

[img]https://i.imgur.com/HvYpYw8.png[/img]

What do you think is the issue?

[Hussain]

If anyone faces the same issue in the future, I could figure it out and the solution was to add this css:

    #symbolpalette {

        display: inline-block;

    }

[Shyam G]

Hi Hussain, 

 

To update the symbol palette width and height, we will take the custom tag(ej-symbolpalette) width and height value which returns improper width and height value. So only the symbol palette is hidden. To resolve that issue, we need to set the CSS display as inline-block for symbol palette as shown in the below code example. However we will consider it in our UG documentation and will inform you once it is refreshed online. 

 

Code example: 

   #symbolpalette { 

        display: inline-block; 

    } 

Regards, 

Shyam G 

[Hussain]

Hi Hussain, 

 

To update the symbol palette width and height, we will take the custom tag(ej-symbolpalette) width and height value which returns improper width and height value. So only the symbol palette is hidden. To resolve that issue, we need to set the CSS display as inline-block for symbol palette as shown in the below code example. However we will consider it in our UG documentation and will inform you once it is refreshed online. 

 

Code example: 

   #symbolpalette { 

        display: inline-block; 

    } 

Regards, 

Shyam G 

Hi Shyam,

Thanks for the reply. Yes, I could figure that out.

Any ideas to make the ej-symbolpalette palette responsive?

I've put it inside a bootstrap div: <div class ="col-2">

With the display being set to inline-block, when resizing the browser window to smaller width I get some of the palette items out of the div.

[Shyam G]

Hi Hussain, 

By default, if we set palette height in percentage, the symbol palette will be responsive. If you set a different measurement unit such as pixel for palette width and height, then please use symbolpalette’s API setHeight and setWidth method in which you can set the height and width for the palette in resize event. Please refer to the code example below. 

 

Code example:  

 

import { Component,HostListener  } from '@angular/core'; 

 

export class DiagramComponent { 

        @HostListener('window:resize') 

       onWindowResize() { 

            var palette = $("#gallery").ejSymbolPalette("instance"); 

            var height = $(window).height(); 

            palette.setHeight(height + "px"); 

            var width = $(window).width(); 

            palette.setWidth(width + "px"); 

        } 

} 

Regards, 

Shyam G 

[Hussain]

That is exactly what I end up doing, however, doing so, will not show scrollbar and will hide the rest of palette items. Refreshing the page will show the scrollbar correctly.

[Shyam G]

Hi Hussain, 

 

We are unable to reproduce the reported issue at our end. Could you please provide us more details such as modify the below sample and demonstrate the exact issue with video. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/angular2-seeds-systemjs-1718102314 

 

 

Regards, 

Shyam G