I'm trying to create a responsive HTML layout which will display an array of ordered data.
On a smaller screen size, it will display one column of content in order. However, on a larger screen size, it'd display two columns with the items alternating between the two columns.
Ex: Small
| 1 |
| 2 |
| 3 |
| 4 |
Ex. Large
| 1 | 2 |
| 3 | 4 |
Adding onto this, in the two column layout, the elements in the left column should be float: right, while the right column should be float: left so that they meet up in the center no matter the width of the elements.
The only idea I've come up with so far is to create two column containers, one that will float all elements right and one that floats all elements left. However, I have yet to figure out how to distribute the items in the order array so that I won't have to split it up into two, since that will mean that when changing screen sizes to the smaller one, the one column of items would no longer be in order.
Edit 1: Each element may not have the same height, and when placing the element, it should go onto the height that has the smaller overall height.
| ------|----------|
| | 1 | 2 |
| | |----------|
| | | 3 | |
| ------|------- |
This is a sample jsfiddle of approximately what I'm trying to do, except perhaps less-hacky. The layout I'm trying to achieve is similar to this, except the elements have a specific order.
So after some testing, a friend and I decided that this was probably the best way was to use display: flex on left elements while using float: right on the right elements as shown in this jsfiddle.
Related
Consider the following python script
#!/usr/bin/env python
from Tkinter import Tk, Label
width = SOME_VALUE_HERE
root = Tk()
label1 = Label(root, text='1 columns wide')
label2 = Label(root, text='%i columns wide' % width)
label1.grid()
label2.grid(row=0,column=1,columnspan=width)
root.mainloop()
When I run this, no matter what value is set for 'SOME_VALUE_HERE', both labels take up half the window, regardless of whether or not Grid.columnconfigure is called, or the sticky parameter is used in grid().
Unless I've overlooked something, I would have thought that setting the columnspan would force the second label to be 'SOME_VALUE_HERE' times as wide as the first.
Have I misunderstood how grid works? How would I go about achieving this behavior?
By default, empty grid column are zero width, so you described the following table. Grid geometry manager will by default try to optimize the screen real estate used by your application. It will integrate all the constraint and produce the fittest layout.
+---------------+---------------++++
| 0 | 1 |||| <-- 2,3,4 empty, 0 width
+---------------+---------------++++
| 1 column wide | 4 column wide |
+---------------+---------------++++
To provide strict proportional column width, you have to use the uniform option of columnconfigure. uniform takes an arbitrary value to designate the group of the column that share these proportions, and the weight argument is used to properly handle widget resizing.
label1.grid(row=0, column=0)
label2.grid(row=0,column=1, columnspan=width)
for i in range(width+1):
root.grid_columnconfigure(i, weight=1, uniform="foo")
Note that with only these two labels, you could achieve the same layout by adjusting the width of column 1. Differences will occur still while you populate column 2,3,4...
label2.grid(row=0,column=1) #no columnspan
root.grid_columnconfigure(0, weight=1, uniform="foo")
root.grid_columnconfigure(1, weight=width, uniform="foo")
When you put something in column 1 with a columnspan of two (or more) that means it will be in column 1 and column 2 (etc). However, if there is nothing controlling the width of a column, that column will have a width of zero. You need to force column 2 to have a widtheither by putting something in there, giving it a minsize, or forcing uniform columns.
When I look at your code, I can't guess how wide you think column 2 should be, and neither can the computer.
I had a similar problem only to discover that the elements are limited by the widest widget. We can safely say that Tkinter is configured to make your app uniform in that it should be a regular repeating square/triangular structure. Solution to override default options.
With the Tkinter's automatic optimization in mind, play with the width and height of largest widget (grid box) and relate the other boxes to it proportionally.
Using the above method use columnspan to adjust the width.
Configure the widths by use of columnconfigure()
Suppose I have 2 columns, say c1 and c2, both with width:50%. c1 has 2 nested columns, c1-1 and c1-2, with widths 30% and 70% respectively.
Suppose the content of c1-1 displays best when it is at least 150px width, that is, when this screen size >= 1000px. What would you do in such a situation, when nested columns need to break before the parent?
Can I set a break point at max-width:1000px, and set c1-1 and c1-2 to have width: 100%, then at a later break point, when c1 and c2 becomes width:100%, I reset c1-1 and c1-2 to have width 30% and 70% ?
FWIW, I think you should approach this from the point of view of how do you want the page content to be displayed at viewports less than 1000px.
The approach you mention would give:
| --- C1-1 --- | | --- C2-1 --- |
| --- C1-2 --- | | --- C2-2 --- |
Another option would be at viewports < 1000px, define C1 and C2 as full width and the nested columns as 30% and 70%, ie
| - C1-1 - | | ----- C1-2 ------|
| - C2-1 - | | ----- C2-2 ------|
It doesn't look like a big difference here, but it could be important with real life data.
For example, presumably the C1-2 content is relatively important. In the first example though, it could be pushed well down the page. Also the second method will keep the C1 and C2 content grouped together visually.
Good luck!
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
We have rectangle sheet, and a small rectangle piece cut inside it at RANDOM place. How to make make that sheet into exact same 2 halves?
If you do a cut through the center of a rectangle, no matter at what angle, this rectangle will be divided in half.
Thus, if we make a cut through the center of the cutout rectangle, each side of the cut will have 50% of the cutout area. And if we -- at the same time -- cut through the center of the large rectangle, this should do it. Both sides of the cut have half the area of the large rectangle, minus half the size of the cutout.
Of course, that is if by "exact same 2 halves" you mean same area, but not necessarily same shape. The latter will generally not be possible.
re: folding - will not work because you could easily end up with more than two parts cutting folded rectangle.
I would try brute-force approach. If the hole is co-oriented to large rectangle, you can cut along one of the edges and have only three cases to check: 1 try to cut above the hole - if it's not possible to end with same area halves, try to 2 cut through the hole - if it's still not possible, 3 cut below the hole will certainly do it. the code for 1 and 3 would be very similar, btw. all 3 cases are simple linear equations for the height of cut. For example, 1:
+----W---+
d |
+--------+
| |
| +-w-+ |
H h | |
| +---+ |
| |
| |
+--------+
We have d * W = (H - d) * W - h * w
If d from this equation is not above the hole, go to case 2, and so on.
After a lot of thought, I think this is the correct answer.
We have to fold the paper sheet, many times, so that it should form the rectangle of the small rectangle area.
If we cut the folded one, it should give 2 equal parts definitely.
Can anybody help or point me in the right direction for a tutorial/example for printing recordsets horizontally, with fixed rows and variable columns. The desired effect:
A------ Crime Estimate
Air Curtains Estoria
Alpha D------ F------
Apple Daily ...
B------ Doctor ...
Banana E------
Billy Eddie
C------ Elephant
Chair Eskimo
[<]-------[|||||||]-------------------------------[>]
I have a DIV with horizontal scroll (like my imitation scrollbar above lol) and need to scroll along the alphabetical list of words. I need to have 8 rows high and that should include the new character heading (A, B, C...) but the amount of columns, nobody knows.
Maybe there's an easier way using CSS. If each word was a block of 100x20px, the first block would have top:0px; left:0px;, the next block would have top:20px; left:0px; and then on the next column, top:0px; left:100px;...
I could probably do it if somebody explained how. Any help or tutorial links gratefully received as always.
MY RESULT
Made with CSS positioning instead of table rows/cells. Happy!
You'll have to weave it into an HTML table where <tr> is a table row and <td> is a table cell or column.
This example shows a standard recordset to table but you will need to change the code to meet your desired format.
http://www.planet-source-code.com/vb/scripts/ShowCode.asp?lngWId=4&txtCodeId=7466
I have found something NOT funny with rectangles:
Lets say, given are values of left, top, right and bottom coordinates and all those coordinates are intended to be inclusive.
So, calculating the width goes like:
width = right - left + 1
So far, so logical. But!
A width of zero (which makes sense, sometimes) would have to be stored as:
right = left - 1
which makes problems, when it comes to the following operations:
Sorting the rectangle coordinates (to make it go left to right, top to bottom)
Looping
Ok, of course those things can be handled with extra code for the special case of Width == 0, but, seriously, is there no better solution, no standard pattern or best practice to handle this?
Edit:
For the time being I have abandoned the "sorting" of the coordinates in my code and replaced it with an assertion stating that the rectangle must be left -> right, up -> down, but seriously...
To address this problem, most graphics libraries will draw rectangles from the left coordinate up to but not including the right coordinate. So if left=10 and right=20, then the ten pixels 10 through 19 will be drawn.
You can think of this as the pixel coordinate referring not to the lit-up portion, but the grid lines between pixels.
+---+---+---+
| | | |
+---+---+---+
| | | |
+---+---+---+
^ ^ ^ ^
0 1 2 3
It's important to distinguish between coordinates and pixels. You can think of the coordinate system as being an invisible grid which runs between pixels. Thinking of coordinates this way if you define a rect as { 0, 3, 0, 5 }, then you get 3 pixels by 5 pixels as expected.
| | | | | |
0 -x--+--+--+--+--x-
| | | | | |
1 -+--+--+--+--+--+-
| | | | | | <- pixels are rectangular areas between coordinate grid
2 -+--+--+--+--+--+-
| | | | | |
3 -x--+--+--+--+--x-
| | | | | |
0 1 2 3 4 5
If the edges (left, right, top, bottom) are inclusive then, by definition, the width (and height) of the rectangle cannot be 0. By "including" the side (which is a pixel), you're saying that it has to be at least 1 pixel wide.
Saying that
all those coordinates are intended to be inclusive
means that there actually are two distinct rectangles, one within another. That's where you get caught: when you write
width = right - left + 1
it really means:
inner_width = outer_right - outer_left + thickness
where thickness is the distance between corresponding sides of inner and outer rectangles.
So, to deal with the problem in abstract mathematical sense, you have to consider two rectangles instead of one.
Of course you can find a workaround for this, but what really is the problem here is going out of scope.
Your scope is a rectangle, and even if a width of zero would come in handy : there is no such thing as a rectangle with width zero.
Normally all functions have contracts and a predcondition of a functions that says docalculation(par_rectangle) is that par_rectangle in fact is a rectangle.
If you need a retangle-like object wich can be width zero, you first need to define it waterproof, and never just assert that rules for rectangles will apply on your definiton.