Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Is there a simpler way to even distribute multiple objects within the bounds of another object?
I've included a picture to help illustrate what I want done.
The green portion is my artboard, the gray portion is the main body and I would like item1-6 to be even distributed within the bounds of the white box. Typically to achieve the desired result I have to create additional objects (represented by the red lines) and place one at the left end of my box, one at the right end, and one between each item, and then use the distribute evenly button and remove the red lines afterwards.
I imagine there is a faster way but I can't seem to find it. Any ideas are appreciated.
Okay, this is slightly fiddly, but hopefully this will seem quite inuitive once you've done it once or twice.
Short version;
Find the width of your container.
Select container and objects - then set container to Key Object.
Enter width of container into Align window: Distribute Spacing, divide the figure by the number of objects, then click Horizontal Distribute Center.
Group your objects and center them to your container. Ungroup them again, if desired.
Long version;
1. Work out the width of your containing box (or artboard, if you are distributing your items to that). If, for example, you have a rectangle you can simply select it and look at the 'W' (width) value at the top of the window (click on Transform to reveal the info if you're working on a smaller screen). Just remember this number - nothing else.
2. Select all of your items AND your container. Click on the container again to make it the 'Key Object' (you should see that its selection edge becomes distinctly fatter).
3. If necessary, open up your ALIGN window (Window > Align). With the window visible, you should see three rows or sections from which to choose - 'Align Objects', 'Distribute Objects' and 'Distribute Spacing'. If the latter is missing, you may need to click on the little up/down arrow symbol next to the 'Align' tab title a few times in order to expand all of the options.
4. Ensuring that you still have all of your items selected and your container set as the Key Object (The 'Align To' box should automatically be set to 'Align to Key Object' in recognition of this), enter the container width you took note of earlier into the 'Distribute Spacing' box - and append /x where x = the number of items you have. So, if your box is 200 pts wide, and you have 5 items, you would enter 200/5 - this will just save you having to do the maths. Illustrator will automatically divide your starting figure and (in the case of this example), it would change to 40 pt (200 divided by 5).
5. Now click on the Horizontal Distribute Center button and all of your items will be set to the correct spacing. They probably WON'T be properly aligned with your container, though, so ...
6. In order to prevent your nicely spaced items being messed up by the next step, DE-SELECT the container (so only your items are selected), group them together - either with the keyboard shortcut CTRL+G (or COMMAND+G on Mac), or by going to Object > Group.
7. With the items grouped, re-select your container (so container AND group of objects are selected), make the container the Key Object again - if you don't want to see it move) and click on Horizontal Align Center. Your items will now be properly centered in your container and can be safely ungrouped if you wish (Ctrl+Shift+G / Command+Shift+G).
Related
I have a series of buttons that I want to appear in columns at the bottom of my QML page. The number of columns across should depend on the width of the window, as the window width increases I want more columns to be added. (And fewer rows as a result as components are pulled up to the previous line)
This is sort of like a Flow component, but I want the items to appear in columns, evenly spaced across the page, in rows and columns (columns centered vertically, at the bottom of the page). Sort of like GridLayout.
I can't figure out what QML component(s) to use to achieve this.
I think what you're looking for is a GridView. See the layout documentation.
I'm not positive, but based on your description I think you would just need to set the flow property to GridView.FlowTopToBottom.
I am trying to create a specific solution for weeks now and I have tried many things but I am just not sure if it is possible at all to achieve. I need your opinions and point me in direction o a correct approach. Following what I am trying to create:
Initially there is a tile layout in which a certain number of cards (say 12) are placed in 4x3 grid:
Now, if user clicks on a tile (Box 3), the state changes to following:
Selected tile is expanded and other tiles get aligned one below another on the right side:
Challenge is that I want to create a transition from every tile's initial state to the state where every tile is aligned one below another on the right. At the same time, when a tile is clicked it is expanded in place.
Note - there are no sudden change in positions, no reload of page and preferably no JS (I wanted to write a CSS-only solution). Everything smoothly animates to new position. From the second screen if a different tile is selected (from right), then the expanded item will shrink and go in to the right hand stack while the selected item will expand and take place of the currently expanded (B3).
If you could just point me to correct direction it would be great help.
thanks.
You should check css flexbox.
Using the "order" proprety, you could asign order of every box from 2 to 8,
and each time a box is selected, you change it's order to 1 and you also change its size and colour.
However, I don't think you can use 'click' actions with css only.
I would recommend using JS for what you are trying to achieve.
Hope it helps
I want to make something like a gridlayout but the layout must decide how many elements can be fitted in a row, and when the row is full continue with the next row.
QtGridLayout also fixes the columns width.
I want to something like this (this pictures was manually organised in Horizontals and verticals grids)
When the image size changes one of the buttons goes to first row.
((In this compositions both images looks with the same size, but actually second one is wider than first one).
Some one answer this question but remove it, so the credits are for my unknown friend.
Qt have an example named Flow Layout Example for a widget based form and another for Graphics View widget.
i am trying to make the pop up information that angular-chart-js provides visible in its full lenght. My problem is as follow: I have mi charts inside a bootstrap defined column, usually when you hover over the chart you get the pop up information but, in my case, there is not enought space for this pop up to be fully visible due to the reduced space of the bootstrap column. Is there a way to make this information overflow visible exceeding the column size?.
I am sorry about my english not being that good.
I had a layout all nicely designed in Qt, but as soon as I clicked on the parent window and set it to a grid layout, things got all wonky. I've read every tutorial I can find as well as the Qt designer manual and just cannot figure out why this is happening. I have attached a screenshot to show the problem:
As you can see, the vertical layout on the left insists on being wider than the children it contains. Both the label and the treeview are set to sizePolicy maximum, and the maximum width is set to 260px. The children themselves stay the correct size, but the vertical layout that contains them doesn't.
The vertical layout in the middle is set to expanding, and the one on the far right is setup the same as the one on the left, only that one appears to work. How do I make the first vertical layout conform to it's children's width?
Also, if I may sneak a second question in, I have a QTextEdit inside the tab widget in the lower right, but it will not fill to take up the space of the full tab view. You can't see that in the screenshot, but if I pull the tabview up, the textedit within it doesn't stretch with it. How do I make it conform to the size of the tab? It's already set to sizePolicy expanding, but that doesn't seem to help.
The problem is most likely that you need to experiment with "stretching" the layout. Stretch sets the size of layout cells in relation to each other. The default is 0, which means no stretching occurs.
In your case, I believe you want to set the stretch of the first column (column 0) to 0, and the stretch of the second and third columns to 1. This means that the first column will always be as small as possible, and the second and third columns will try to be equally wide.
You can set the stretch programmatically quite easily; for example, to set the first column to stretch 0:
layout->setColumnStretch(0, 0);
In Qt Designer you can access column and row stretches as any normal properties.