How to arrange HTML components in rows
Normally when you write a sketch and add HTML components such as divisions, paragraphs,
buttons, sliders, ..., HTML just puts them at the end of the file, filling the page as if they were
written as part of that page as demonstrated by the "no parent" and "Again no parent" buttons at the
end of this page. Using some id, parent, and style options, we can do much better as shown above.
The light aqua "p5" division was setup and styled in the HTML file in order place it between
the title and these comments.
It would have been possible to manipulate its style with the p5js code, desired.
Some notes:
- Many of the items and colors in this page were picked randomly. The page will look different
each time you reload or refresh it.
- The first 10 components in the p5 division are put there in order just by setting their
parent to "p5". The numbers
represent the order of insertion, that is, the order in which their parent was specified. Textual
components state the type of the component before the meaningful text.
- Next a paragraph announcing "Method 1" and the division for "Row 1" were added next. The
components in the "Method 1" section
were randomly assigned a size and color. The numbers represent the order of insertion. Most are
divisions. The parent for each item is the division for their row. They were arranged using the
"float: left" style. Using "float: right" would anchored the components on the right side in a right to
left order.
- Next a paragraph announcing "Method 2" and the division for "Row2" were added next. Its
divisions were randomly assigned a size and color.
Each division in that row contains a span and the component specified at the top of the division.
They were initially absolutely positioned using the position() method. The width is random but top was
assign to the top of the division for "Row 3" in setup(). The coding
has to calculate horizontal position based on the width of
divisions on its left. Because of the absolute positioning, the
parent does not matter much in this case so they were assigned "p5" as their parent but their
parent could have been the division for "Row 2"
- Finally the paragraph announcing "Method 3" and its division were added. The row's division
specifies the optional "text-align: center". "display: in-line-block" had to be
specified for
each element. This is clearly the easiest way to center divisions horizontally.
- Methods 1 and 3 are differently easier to use. However, vertical alignment in Method 3 may
be a problem depending on the types and contents of the elements. In general, the elements
(even divisions)
are aligned so that the bottom rows of text are aligned (assuming the element included text).
However some browsers (notably Chrome based ones) align using the top row of text in buttons.
Vertical alignment might not be a problem in many situations, especially if background colors and
borders are not used and elements have the same height. Experimenting with vertical alignment
is beyond the scope of this page.
- What happens if the height of something above an item changes? Experiment with the slider near
the top of the page. Elements with default or float positioning are adjusted according. The programmer
must add code to adjust when absolute positioning is used.
- What happens if the width of something on the left changes? Experiment with the slider in Method
1. Again elements with default or float positioning are adjusted accordingly. The programmer
must add code to adjust absolute positioning.
- In this sketch the adjustments in absolute positioning are done in the inputChanged() method
when "Dynamic" has been chosen in the drop down select box near the top of the page.
In the setup() method, these statements:
s3.input(inputChanged); where s3 is the top slider
sel7.changed(inputChanged); where sel7 is the select (drop down) near the top
method1Div[2].input(inputChanged);
method1Div[2].mouseReleased(inputChanged);
where method1Div[2} is the slider in Method 1.
were added to associate the function with the slider and the select (drop down) box.
The function inputChanged contains to code restyle and resize the chosen components. In
addition, when "Dynamic" has been chosen it will locate the "Row 2" components correctly. The
Static/Dynamic option would rarely be used in real programs where "Dynamic" positioning would
almost always be used.
- What is the difference between input() and changed() functions? The easy way to
think about them is to consider input to mean "is changing" while changed means
"was changed" at least in terms of sliders.
- To simplify the creation of new random components, this program uses:
- function myCreateElement(tag, content, parent, style) which extends
createElement(tag, content).
- function randomColor(aMin, aMax) which extends color(r, g, b) by picking
random values for r, g, and b having values between aMin and aMax.
- function randomSize(aMin, aMax) writes (a portion of) a CSS style by picking random
widths and heights between aMin and aMax.
These functions are stored in
http://www.brinkje.com/p5js/SomeFunctions.pjs.
- If the width specified by the slider for adjustable width elements in any row is too big, it is
interesting to see what happens
when the width of the components in a row exceed the available space. The result
depends on the positioning method used.
See also:
HowToLayoutDiv.html.
Source code:
HowTo/HowToArrangeRowsHTMLComponent.pjs
James Brink, 3/2/2020