I've tried both jQuery Masonry and Isotope plugins and can't seem to achieve the layout I desire.
Both plugins appear to calculate the "next available space" based on the height of elements on the previous row. For example:
In this example item #6 goes to the far right because the height of #4 is less than the height of #2 (where I want it to go).
The layout I would like to achieve is more similar to left-floating elements:
Are there options on the above two plugins to achieve this layout or perhaps a different plugin available?
Two possible solutions
Try out the experimental Masonry-ordered script by tasuk. It has an option to control if you want items to progress left-to-right, rather than Masonry's default next-best space.
Build your own custom layout mode for Isotope. Your layout mode would be variant of Masonry. Instead of calculating the next best space, it just progresses left-to-right through the available columns.
Related
I'm using Draggabilly and Packery to build a optimized draggable layout as shown in this Codepen: https://codepen.io/rafaF/pen/MWjvjqO
I have some doubts about how to use Packery/Draggabily.
The first one is how to convert en element "no-draggable", i.e., avoid to be dragged. I've achieved this by no initializing its Draggabilly instance, but I would like also to not be sorted when dragging others elements.
In the other hand, I have not been able to set a fixed height on my Packery layout in order to limit how many elements fits in a column. My idea is that if you move an element to a column that has no free space, the most bottom element should be moved to the other column. I have not found any way to do this.
There is enabled and disable switch in Draggabilly instance that you create. So just disable it if you do not need it.
The second part has to be manually solved becuase the Packery and draggabily would try to adjust in the same layout giving you best possible fit. If you want to limit the height then you have to set and run the ShiftLayout() on pakery. Ideally I would leave it to packery to determine the best layout.
I'm generating Views inside FlexBox layout by pressing the Start button. As you can see every item on even line has random size. It works almost as it supposed to be but there is a problem, I need to get rid of vertical gaps between two vertically adjacent views. I've tried all properties of Flex Box Layout but didn't find one that can help to solve my problem. I will be happy if you help me to solve this problem.
I've solved this problem. If you have the same task you should use Relative Layout and its' flags inside your android code. It'll give you all control under the positions of Views. If it will be necessary I can expand this answer to provide more detail.
I am tying to create a UI in photoshop that will be used to render a full-width site. I have never used flexbox before and I've never created a full-width site before using it.
I'm wondering if I simply stick to the default bootstrap breakpoints or if I need to be doing something entirely different.
An example of the type of full-width layout:
Thou this is a very general question, I'd have following advice for you:
I would use both, grid & flexbox, since, grids are great for building the bigger picture and make it really easy to manage the overall layout of the page. They are also able to handle more unorthodox and asymmetrical designs.
Flexbox is great at aligning the content inside elements so you can use flexboxes to position the smaller details of a design.
You could use CSS grids for 2D layouts (rows AND columns) and Flexbox for one dimension only (rows OR columns).
There is no reason to use only CSS grids or only flexbox - they work well together in their respective field of usage.
For layouting and screencasts I can definitly recommend Adobe XD - quite fresh in the Adobe-family and free for now.
I hope that gave you some idea how to approach your project andf plan the layout according to your needs.
EDIT:
Have a look at this article - it should give you a fair understanding on how to set breakpoints according to your layout and the media/device.
What's the best approach to mimic the Windows Explorer navigation bar in PyQt?. Perhaps a list of QComboBoxes as part of a parent class that concatenates the current item of each combo box to resolve the final path?
Is it possible to get a similar look by using stylesheets?
This is the object I need to mimic. I just want a theoretical approach about the best way to mimic it.
Thanks in advance
This is technically known as a breadcrumb widget.
There are multiple approaches to this. The closest emulation to Windows Explorer's behavior--leaving out the normally hidden line editor--involves a chain of widgets like so:
A top level parent QWidget-derived class with your implementation, which would have:
A QHBoxLayout
An arbitrary number of QComboBoxes
A QFileSystemModel from which to populate the combo boxes.
Alternatives
You could use a single QLabels with a series of hyperlinks divided by path separators if you don't care about drop-down behavior. Qt Creator does this.
If your data source is static and not as gigantic as the filesystem, you could use QToolButtons backed by a tree of QAction/QMenus. This is possibly a masochistic approach, given that you have to populate all of the actions and menus. Since that's what they are there for, though, it might be handy as part of a context-sensitive menubar or tab bar.
I was looking for such a widget too without any luck. So I've tried to implement this by myself. It's not finished yet and needs some more work, but here's the first result: breadcrumbsaddressbar.
It's based on QToolButton widgets with menu. Parts of address which don't fit are hidden like in Windows Explorer. Also the widget has auto-completion feature.
Update: there's also a C++ widget QtAddressBar which I have't tried.
Here's a tricky one: has anybody seen a YUI dialog/panel implementation with nice OS X style shadows around the dialog, instead of the blocky shadow that is implemented by default with the "underlay" element?
You can see this type of shadow on Amazon.com popup windows. It requires quite a bit of PNGs but looks very nice.
I'm thinking of inserting extra DIVs or replacing the .underlay element, and hook into the dialog size event to adapt the dimensions. The latter would be required because YUI uses some CSS trickery to make the underlay element "snap" to the dialog dimensions with CSS only in modern browsers, and uses a manual dimension update for IE.
EDIT: Just checked YUI 3. The Panel widget is not available yet, only the Container and it's still beta. So I'm looking at solving this in YUI 2.
PS: Oh I guess I could include the PNG shadow as part of the Panel's header, body and footer (hd, bd, ft), as an extra padding. And use a css rule to hide YUI's underlay. Hmmmmmm I just wish I didn't have to do this because it changes calculations for the draggable area, it's not a great way to do it.