search

jslegers / cascadeframework

Cascade Framework
Other
275 stars 52 forks source link

Shifty navs #80

Closed thdoan closed 9 years ago

thdoan commented 9 years ago

On all collapsible components, the text shifts ever so slightly. You can see an example of this in the "Menu tree" here:

http://www.cascade-framework.com/components-navigation.html

As you expand and collapse the menu, the text label should stay in the same position instead of shifting left and right.

jslegers commented 9 years ago

I never experienced this problem you're mentioning.

Can you tell me which OS, which browser and which kind of device you're using?

thdoan commented 9 years ago

I'm using Chrome 38.0.2125.101 beta-m on Windows 7. Here's a screen capture:

jslegers commented 9 years ago

I see what you mean. This can easily be fixed by setting a fixed width for the icon.

If I set a fixed width, the menu becomes less dynamic, though. I don't really like this behavior either. Somehow it feels more natural to me to have the text move along with the width of the icon.

Do you have a suggestion on how to improve the look-and-feel of the menu so it feels less shifty without feeling less dynamic?

thdoan commented 9 years ago

I suppose this is a matter of personal preference (i.e., to some it feels more dynamic, to others it may be a bit jarring). Unfortunately I don't have a magic bullet solution -- all I can offer is the observation that on desktop OS's when you expand/collapse a folder tree the text label doesn't move. jQuery, among a number of other popular frameworks, also keeps the text label position static, e.g.:

http://jqueryui.com/accordion/

It's no big deal to override the CSS though, as you suggested.

jslegers commented 9 years ago

@thdoan :

Now that you mention jQuery UI, I just released a project that integrates Cascade Framework with jQuery UI -> https://github.com/jslegers/cascadeframeworkadvanced

evan70 commented 9 years ago

Fantastic!

thdoan commented 9 years ago

Nice work, John. This doesn't warrant a separate ticket, so I'll just mention it here before closing this issue: on http://jslegers.github.io/cascadeframeworkadvanced/dashboard.html, there's an issue where if you resize the window to a really small size (e.g., mobile size), collapse the chart panel, and maximize the window again, you'll see that the chart itself is still tiny.