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. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. jQuery
  4. ejSymbolPalette: Responsive Sizing needed

ejSymbolPalette: Responsive Sizing needed

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

5 Replies
SG Shyam G Syncfusion Team August 22, 2017 12:51 PM UTC

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  


RM Robert Mims August 22, 2017 12:58 PM UTC

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?



SG Shyam G Syncfusion Team August 23, 2017 06:16 AM UTC

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 


RM Robert Mims August 23, 2017 10:56 AM UTC

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


SG Shyam G Syncfusion Team August 24, 2017 05:58 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon