Differences

This shows you the differences between two versions of the page.

--- en:create:table-layout [30.09.2015 20:56] – [Placing elements side by side] Update admin
+++ en:create:table-layout [18.09.2024 21:32] (current) – [Option A: Flexbox] admin
@@ Line 1: / Line 1: @@
-====== Placing elements side by side ======
+====== Placing Elements Side by Side ======
-This chapter demonstrates how to place elements in the questionnaire side by side. For example, an image nest to a question or two questions side by side.
+This chapter describes how to place different elements side by side in a questionnaire, such as an image next to a question or two questions next to each other.
-**Important:** If you'd like to place two questions side-by-side that contain the same items (for an Fishbein scale, for example), please read [[combine]].
+**Important**: If you want to place two questions with the same items side by side (e.g., for a Fishbein scale), please first read [[combine|Combined Questions]].
 ** Example 1 **
@@ Line 13: / Line 13: @@
 {{:de:create:scr.example.combine.dropdown.jpg?nolink|Dropdowns placed side-by-side}}
-For a step-by-step manual for the above example, please read [[table-layout-dropdowns]].
+For a step-by-step description of the above example, please read [[table-layout-dropdowns]].
-===== Basics: Tables =====
+===== Option A: Flexbox =====
-The basis for a two-or-more-column layout is a HTML table. A simple HTML-table is shown below. Underneath the HTML-code for a table with 3 columns of the same width and two rows is displayed.
+A Flexbox layout consists of a Flexbox container ''%%<div style="display: flex">%%'' and elements within it that are arranged side by side.
+The difference from tables (below) is that you can allow Flexbox elements to wrap to multiple lines if there isn’t enough space. This allows elements to be placed side by side on a computer screen and stacked on top of each other on a smartphone.
+For more information: [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|CSS Tricks: CSS Flexbox Layout Guide]]
+If you want to place two questions next to each other, you need to add "HTML code" (not to be confused with "PHP code") on the questionnaire page (Assemble Questionnaire) that essentially creates a frame around the questions. It could look like this. The part between ''%%<!--%%'' and ''%%-->%%'' is a comment and serves only for orientation; these lines are irrelevant for functionality.
+<code html> <!-- Flexbox container --> <div style="display: flex; flex-wrap: wrap; gap: 0 50px;"> <!-- Start of left element --> <div style="flex: 1 1 400px; min-width: 320px;"> </code>
+{{:de:create
+.question.de.png?nolink|Question between the HTML code}}
+<code html> <!-- End of left element --> </div> <!-- Start of right element --> <div style="flex: 1 1 400px; min-width: 320px;"> </code>
+{{:de:create
+.question.de.png?nolink|Question between the HTML code}}
+<code html> <!-- End of right element --> </div> <!-- End of Flexbox --> </div> </code>
+The width ratio of the two columns is determined by the ''flex: 1 1 400px'' setting applied to both elements. If the second element had a larger value, such as ''flex: 1 1 600px'', the right column would be wider. The two ones (''1 1'') indicate that the elements can grow or shrink based on the base width (400 pixels in this case).
+The ''gap: 0 50px'' setting in the container indicates that a horizontal space of 50 pixels should be left between the elements. If the elements are displayed one below the other (see below), no gap will be added.
+The ''min-width: 320px'' setting specifies that each element must not be displayed narrower than 320 pixels. If there is not enough space for both elements side by side plus the gap (320 + 50 + 320 = 690 pixels), for example, on a smartphone or when the browser window is not maximized, the elements will be displayed one below the other (''flex-wrap: wrap'' allows this wrapping). In this case, they will occupy the full available width again.
+In place of questions, other elements can also be inserted between the HTML code, such as images or the [[:en:create:media
+|HTML code for media files]].
+===== Option B: Tables =====
+**Hint:** Tables are easier to control but less flexible. If you expect users to complete the questionnaire on a smartphone, you should avoid using tables.
+The basis for a multi-column layout is HTML tables. A simple HTML table looks like this. Below, you’ll see the HTML code for a table with 3 equally wide columns and 2 rows.
 |  | **Column 1** | **Column 2** | **Column 3** |
@@ Line 43: / Line 73: @@
 </code>
-**Hint:** The specification ''<colgroup>'' is optional. Although it usually is useful to define the column widths exactly. Instead of percentages you may also enter the width in pixels (e.g. ''width="150px"'').
+**Hint:** The width specification ''<colgroup>'' could be omitted, but it’s usually helpful to define the width of each column. Instead of percentages, you can also specify the width in pixels
-**Hint:** Instead of using tables, you can use CSS for layout purposes. However, this requires advanced HTML skills.
+**Hint:** HTML also offers layout options without tables, namely CSS positioning. However, advanced HTML knowledge is needed to use them effectively.
-===== Using tables in the questionnaire =====
+===== Tables in the Questionnaire =====
 This is the theory how to use tables to place two questions side by side:
@@ Line 105: / Line 135: @@
 {{:en:create:scr.table-layout.example1.png?nolink|Elements placed side by side - example 1}}
-===== Optimize the display =====
+===== Optimizations =====
-As you see in example one, the output may need to be optimized.
 ==== Spacing ====