I am trying to create dashboard edit mode grid with gridstack javscript library.
Here is what I am trying to accomplish which is similar to this Databox platform. This is what it looks like when you edit any of the dashboard to view/edit it in grid mode.
So when I drag the blue border handle and scale the div(or even move with cursor hand) then the around grid(which is background layer with absolute position in reality) is automatically adjusted to match the corresponding div. Like this.
Even if there are multiple widgets there, resizing is working everything perfectly fine.
e.g. if there was any sibling widget then resizing this widget would also resize the sibling widget but can not go beyong 1 * 1 grid which is smallest size there.
Even after resizing both widgets, the background static grid boxes (with yellow border) fills the remaining vacant space similar to what is the concept of dense packing algorithm in css grid.
They are removed when widget is grown and added when it is shrinked.
As it seems super complicated to achieve this, is there any default feature like this with grid-stack library?
Related
I have done my own version of the PropertyCross Demo (provided in their demo section).
The problem I currently face is the size of the "Recent Search" area. While I have a non-scrollable container, I can easily define the preferred height. As the Box Layout adheres to the preferred size, all is well, with the little issue of not being able to scroll it and see more than one result:
recentSearchContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS)); recentSearchContainer.setPreferredH((int)(this.getContentPane().getHeight() * 0.1f));
Once I set the container to scrollable, the preferred height gets overwritten and takes up as much space as it needs, taking too much space from the BorderLayout Center piece above it.
How to manipulate the preferred size of scrollable components?
You don't manipulate the preferred size. Scrollables take up more space so if you need them to take up a specific amount of space you need to use the right type of layout which in this case might not be border layout...
Border layout gives NORTH/SOUTH elements their preferred height which might not be what you want. You might want a grid layout which will divide the height 50/50. You might want a table layout where you can define the height in percentages etc.
For those who are interested, here is the solution:
Setup a table layout with a single column and as many rows as you need (similar to box layout y axis or border layout which only north, center and south).
Set the table layout to non-scrollable so it defaults to 100% of your screen.
add the components with height % of the screen they should take up.
those components can be scrollable and will still stick to the height constraint!
// inside a form object, setup the layout
TableLayout tl = new TableLayout(3, 1);
tl.setGrowHorizontally(true);
setScrollable(false);
setLayout(tl);
...
// and add stuff to it
add(tl.createConstraint().heightPercentage(15), labelDesc);
add(tl.createConstraint().heightPercentage(50), compGroup);
add(tl.createConstraint().heightPercentage(35), recentSearchContainer);
Works like a charm!
I'm making an emacs-esque toy text editor. At startup, there's one large window (a QTextEdit derivative) in the top center of the screen, with a minibuffer (QLineEdit derivative) underneath. Both of the actual editing widgets are contained in the grids of parent classes called Window and MiniWindow (Window also keeps track of a QLabel that appears directly beneath the QTextEdit).
My Window object is at location 1, 1 in the grid, and my MiniWindow object is at 2, 1. I've set content margins to 0 and spacing to 0, which looks great at first, but when I try to grow the window by dragging on the corner, this starts to happen:
As you can see, the screen is divided into two rows (as it should be), but half of the vertical length of the screen is dedicated to each row. What I need is for the top Window to stretch its length during resizing so that it is always adjacent to the MiniWindow underneath. Is there some other option I need to be setting?
Nevermind, got it.
I was having this problem because the QLineEdit object was in the grid of my container class, MiniWindow. The height of a MiniWindow object is free to vary with the window resizing in a way that a QLineEdit alone would not be. The fix was set to the maximumHeight of MiniWindow to approximately the height of a QLineEdit, which is around 16.
Works great now.
I have this IText object within a parent Group object.
When I select the Group and resize it horizontally (and vertically as well) the IText resizes as well which makes the text Strech and look awfull.
Now what I would like to do is have the IText center itself (keeping its aspect ratio) within the Group.
How can I do that. I tried modifying the Width and Left of the IText when the object is scaling, but that did not work.
try use latest fabricjs version ( 1.6.0.rc1 ) and instead of using fabric.IText use fabric.Textbox.
This new class has the properties you are looking for, the controls normally used for scaling are instead used for resizing the element and the text flows inside it.
I was not able to make the latest fabric.Textbox work exactly like I wanted.
Luckily, I found a way of making the fabric.ITextcenter horizontally when the parent fabric.Group is resized horizontally and also make the same fabric.IText Text grow in size based on the vertical resize. No ugly text stretch.
Here is the solution:
https://jsfiddle.net/t44wyday/46/
I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.
To do this, i'd like all the artwork to be in 1 png file, a css sprite.
My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.
Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height.
I'd like to know, is this even possible? It seems background-position does not support this at all.
I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.
I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.
Spent another few hours twiddling with css, but could not get sprites to work for dialogs.
But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.
I'm using the technique from How can I scale an image in a CSS sprite
See http://mediabeez.ws in about a month for the opensource release of animated dialogs.
I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.
As far as I know ON_WM_MEASUREITEM does not get called in Custom Draw list control. It is only used if control is Owner Drawn.
I have found a way to do that, but it is somewhat a HACK and I still can not control gaps between items they are set up somehow automatically.
The trick is that you can create CImageList with the unused images of the size you need and if you assign such image list to the list control, items get resized to the dimensions close to the size of the images. After that you can use Custom Draw to paint whatever inside those enlarged items.
CImageList m_imageList1;
m_imageList1.Create(176, 144, ILC_COLOR32 | ILC_MASK, 5, 1);
GetListCtrl().SetImageList(&m_imageList1, LVSIL_NORMAL);
So the question is how do you change items size and spacing between them in Custom Drown control?
Or a fully Owner Drawn control with LVS_OWNERDRAWFIXED is my only option here?
Update.
I have compiled the same custom drawn list control in VS2008. And the look was different. The item size was perfect, and no gaps between the items. I guess that sizing problem I had was only in MFC for VS2003, I was using initially.
Man, MFC is a constant HACK spree :-)
I guess the question is closed. Thank you (me).