0

I am working with panel sliding effects and stuck with situation like,

I have panel of width 150px with some content inside it, at some point if I reduce it's size by 70px for which I need to add sliding effect to that panel.

I wrote a code for this as,

VerticalPanel myPanel=new VerticalPanel();
myPanel.setWidth(150+"px");

// here I do some operations 

myPanel.addStyleName("animated slideOutLeft");
myPanel.setWidth(80+"px");

when I reduce it's size it should automatically inherit "animated slideOutLeft" style with the inner content shown as it is. But in my case, "slideOutLeft" gets applied but inner contents doesn't remain visible and myPanel slidesOut.

It should slide out partially i.e. from 150px to 80px should be visible which is not currently taking place, instead it is sliding out full.

What is wrong in this.? How can I solve this issue.?

you can refer an example in https://agileui.com/demo/monarch/demo/admin-angular/index.html#/ where I want that same logoSliding at upper left corner effect which slidesIn and slidesOut.

Pratik Rawlekar
  • 327
  • 4
  • 14

2 Answers2

0

When you reduce the width of a panel, children elements within that panel will reflow within the new width.

The example you point to hides some children elements when the panel's width is reduced.

So your code will work if the panel always contained children that fit within a smaller width. Alternatively, you can try setting overflow: hidden on your panel and settings children's width explicitly.

Andrei Volgin
  • 40,755
  • 6
  • 49
  • 58
  • and what if my panel don't have width.? so, it can adjust with its inner content size. I tried with overflow:hidden but didn't worked. In case of that link where logo panel slides out but the logo remains there which does't happen in my case, my logo also got hide with panel. – Pratik Rawlekar Apr 06 '16 at 07:14
  • 1. Every HTML element has width. It can be set explicitly or calculated by the browser's layout engine. 2. We can't help you without looking at your code. – Andrei Volgin Apr 06 '16 at 15:07
0

Long time ago I asked something similar. I would suggest you this topic in which you could find a possible solution combining percentage width and px min-width.

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77