We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

ejSymbolPalette: Responsive Sizing needed

Thread ID:

Created:

Updated:

Platform:

Replies:

132226 Aug 21,2017 04:14 PM Aug 24,2017 01:58 AM JavaScript 5
loading
Tags: ejDiagram
Robert Mims
Asked On August 21, 2017 04:14 PM

See: http://jsplayground.syncfusion.com/1rqti0t4

Resize the right-panel to observe the behavior.

I'm looking for (short of creating a plug-in or a custom binding extension for KnockoutJS) the symbol palette to be responsive as are other controls within the suite (particularly the diagram.)

My issue is that my user's activate a panel to configure aspects of the diagram (like a tool window in Visual Studio.) When they do so and change the browser dimensions (resize), the symbol palette stays the size it was measured at inception, instead of adapting as other controls do. This leads to a poor user experience and in some mobile rotation scenarios, usability issues.

Would it be possible to have the Symbol Palette responsive or will it be necessary for me to use a plug-in, event hooks or a custom binding to introduce consistency in behavior with other Syncfusion controls?

Thank you.

Robert

Shyam G [Syncfusion]
Replied On August 22, 2017 08:51 AM

Hi Robert,  
 
By default, if we set palette height in percentage, the symbol palette will be responsive. You have set a different measurement unit(vh) for height, so please use symbolpalette’s API setHeight and setWidth method in which you can set the height and width for the palette in window resize event. Please refer to the code example below. 
 
Code example:  
$(window).resize(function () { 
            var palette = $("#gallery").ejSymbolPalette("instance"); 
            var height = $(window).height(); 
            palette.setHeight(height + "px"); 
            var width = $(window).width(); 
            palette.setWidth(width + "px"); 
        }); 
 
Regards,  
Shyam G  


Robert Mims
Replied On August 22, 2017 08:58 AM

Thank you, Shyam.

I updated the example to use percentages for width and height (see: http://jsplayground.syncfusion.com/uwtjfie1) however when you resize the panel you'll see that the symbol palette retains its width while the diagram adapts. That doesn't seem to be the behavior you are expecting with percentages, right?



Shyam G [Syncfusion]
Replied On August 23, 2017 02:16 AM

Hi Robert, 
 
In window resize event, please use symbol palette API setWidth method in which you set an palette width in percentage to achieve your requirement. please refer to the code example and modified playground link. 
 
Code example: 
$(window).resize(function () { 
                    var palette = $("#gallery").ejSymbolPalette("instance"); 
                    palette.setWidth("100%"); 
                }); 
 
 
Regards, 
Shyam G 


Robert Mims
Replied On August 23, 2017 06:56 AM

Thank you for your patience, Shyam.

I apologize, I misunderstood your original explanation - the example helped with that.

I'll proceed with that recommendation in a custom binding extension for my KnockoutJS implementation.

Kind regards.

Robert


Shyam G [Syncfusion]
Replied On August 24, 2017 01:58 AM

Hi Robert, 
Please let us know if you need further assistance on this. 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;