ExtJS Dashboard Panel Fit Panel Vertically - javascript

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

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.

Buttons filling up available space, grouping them into a dropdown

Say I have a top header of a view in the application. This header row should be single row, and contains action items like input boxes and/or action buttons. When I have, so to say, 5 action items in the header then on FHD resolution these doesn't take up the available horizontal space which is OK. Then on smaller screens, like an iPad (landscape, 1024px width) these action buttons, accumulated, have more width then the available. The generic responsive solution would be to wrap some items into a new row, right? Now in my case I can't wrap into multiple rows but what I need to achieve is to group those action items which doesn't have enough space into a dropdown.
How could I possibly identify which items doesn't have enough space so that which items I need to put into the dropdown? Is javascript the only solution? Is there a common way to solve this?
Thanks
The most common way to solve this would be using CSS media queries.
For example, the CSS tricks website uses this on their navbar: https://css-tricks.com/
You can see that on a desktop sized view there is a list of links on the left hand side of the page. But if you resize the page to be smaller this list of links collapses into a dropdown 'hamburger' style menu in the top navbar.
Read about media queries here https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.
Media queries basically allow you to add conditional rules based on screen size.

Cannot scroll a psuedo scrollbar

I don't have any experience in web development and I am trying to build a UI Grid to display a large number of data points.
I am trying to create a scrollbar to be able to scroll all data points (let's say for arguments sake that it's 1,000,000) and should be able to scroll horizontally across all data points. It should only load a 20x20 data points and lazy load the next page when the scrollbar is moved appropriately.
I've managed to get the horizontal scrollbar to show on the screen but now I am trying to get it scroll. I am using fattable (https://github.com/fulmicoton/fattable) as my inspiration.
http://jsdo.it/jpez/Q7g0
How can I get my horizontal scrollbar to actually scroll when you click mouse on it and move it? It doesn't move at all.
Your element stacking order is not correct. Add z-index: 1 to your scrollbar or move .signal-viewport before your scrollbars like this:
<div class="signal-viewport">...</div>
<div class="signal-h-scrollbar">...</div>
<div class="signal-v-scrollbar">...</div>
More info about the z-index

Dynamically resize Bootstrap panels on panel collapse/minimize

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?

Center box grid horizontally and vertically with stamp in the middle

The website I am building requires to have grid of images where one image is in the middle no matter how many images there are in the grid. This is in fluid layout and images are supposed to be editable by website admin and only height is fixed.
Image explanation:
I was thinking to use something as Masonry or Packery but those don't provide any centred layout options. What approach would you take to sort this out?
To approach this problem, I would have each row of images be inside of a container. Then you could absolutely position the container based upon calculations to center the "stamp."

Categories