Dynamically resize Bootstrap panels on panel collapse/minimize - javascript

I have a page where there are 3 panels adjacent to each other with width 4-4-4.
I am looking for a solution by which if any of the columns if minimized/collapsed.... then the other 2 panels could resize itself and take the space left behind by the collapsed panel and make their width 6-6.
Same again if of the remaining 2 panels if any of them if collapsed the left over panel should resize itself to take over the whole page 12.
Is there any javascript library available which gives me a optimum solution for this?

Related

Scroll Children (AG-Grids) from main Window

Goal:
Vertically Scroll multiple tables (AG-Grid) with a "global" scroll-bar on the main window.
Problem:
I have 4 child elements (AG-Grid Tables) within a Window, these children can be up to 3 times the with of the main Window.
Now the children would need to be scrolled separately and a scroll bar would be displayed in the rather slim child elements.
The goal is to display a horizontal scrollbar on the main window itself (if the children need scrolling), and this main scrollbar scrolls one of the child windows (AG-Grid offers the functionality to synchronize the scrolling of one table to another).
All 4 children always have the same width as the width is determined by the columns shown within the AG-Grid tables.
The application is written in React using AG-Grid for displaying/virtualizing these tables. So if someone has a solution specific to AG-Grid this would still be helpful.
Thanks for any input!
Edit for clarity: It is already possible to scroll the grids separately / the second thing working is to give the window the full with and scroll the window itself instead of the grids (This is unfortunately not a solution as the first column of the grid should be pinned to the left side of the screen so rows can still be identified when scrolled to the right)
Edit: Screenshot for clarity
It seems you need to combine this two features column pinning and aligned grids. I don't know if they work together.

Multiple Like buttons with the same url

At the moment I'm creating a responsive web site so that it works on mobile devices as well.
The design is of such a nature that I hide a vertical menu that also contains a facebook like button when the screen width is less than 480px.
When the width is less than 480px I then display a horizontal menu (that was hidden) that also includes a Facebook Like button for the same page.
In other words, when screen width is greater than 480px then a vertical menu is displayed and the horizontal menu is hidden. When width is less than 480px the vertical menu is hidden and the horizontal menu is displayed.
The above scenario means that there will be 2 Facebook Like buttons on the same page with the same URL set.
Will this create problems?

ExtJS Dashboard Panel Fit Panel Vertically

I'm creating an application that has a layout based on the ExtJS5 Portal Demo. I need to have a panel in the Dashboard that will fit vertically, not just horizontally to fill the entire space of the column. At this time this just needs to occur for one of the panels, not all as most will have a fixed height and the user of course has the ability to resize vertically because the Dashboard panel uses anchor layout.
This panel will contain a map and I need to display as much of the map as possible. If the column contains multiple panels and the user drags one to a second column I would like for the map panel to resize and fill any empty vertical space in its column. The inverse is true, if someone drags a panel to the same column as the map panel will need to decrease but still fit to as much vertical space as possible.
I believe using a vbox layout on the panel is what I need but I've tried this on the dashboard panel with no luck. Has anyone else run into this, any suggestions? Thanks
Have a look at the align config on vbox - it might do what you want if you use one of the stretch options.
http://docs-origin.sencha.com/extjs/5.0/apidocs/#!/api/Ext.layout.container.Box-cfg-align

Javascript to auto size NAV menu columns

I am trying to style a NAV menu that is created and fed in dynamically by a SAAS CMS. I want the menu to auto resize into any given number of Columns.
For example:
If the NAV overall width is 960px. I want the menu items to resize in to say 5 equal columns.
Secondly the menu goes two children deep.
So if the top level is parant. this is seen by default on the page. When you hover the Children appear Similar to this site. http://www.laylagrayce.com/ (Ignoring the images in the menu.) I just want it to resize into equal columns.
How can I do this?
You have heard about responsive websdesign? In this case I think its the onlyest solusion.

jQuery Mobile horizontal scrollable divs (dynamic multiple columns but 1 row)

Is there a way in jQuery Mobile to create a layout with dynamic multiple columns that is scrollable horizontally. (Something like a infinite carousel / picture slideshow but with DIVs and not images.)
You may want to take a look at iScroll-4. This can be used for vertical and horizontal scrollers

Categories