Differences

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

--- wiki:ai:editing_the_layout [2025/05/31 16:56] – Neil
+++ wiki:ai:editing_the_layout [2025/10/19 15:08] (current) – [Breaking the Column Layout] Neil
@@ Line 1: / Line 1: @@
 ====== Editing the Layout of Panels ======
-{{ :wiki:ai:gauges.png?nolink&400|The top half of the Gauges page}}Under the design of the AI just about every page can be re-arranged without resorting to cutting and pasting sections of HTLM code.  This means that page layout can change as your weather station develops and new sensors / features are added.  It also means that if you are not happy with the layout I have used you can change((And undo that change.)) it with just a few simple steps.
+{{ :wiki:ai:gauges.png?nolink&400|The top half of the Gauges page}}Under the design of the AI just about every page can be re-arranged without resorting to cutting and pasting sections of HTML code.  This means that page layout can change as your weather station develops and new sensors / features are added.  It also means that if you are not happy with the layout I have used you can change((And undo that change.)) it with just a few simple steps.
 Show is the top of the **Gauges** page showing the default layout on a wide screen. Each panel has a **css style** attached to it, which by default is **order:1;**.  When your browser encounters this it looks for other panels with an order number.  If they are the same, then the browser displays the page in the order that it has been coded.  As they are all **order:1;** all panels appear as I have coded them.
@@ Line 55: / Line 55: @@
 In the above code the very first line **92** has a **//div//** has a class **//ax-column4//**.  This class dictates how many columns will attempt to be displayed((Remember that on narrow devices they will automatically get altered to ensure panel content can still be read)).  There are **six** available column classes - **ax-column1** to **ax-column6**.
-Simply by changing this class will re-adjust the number of columns used.  **HOWEVER**, this is bound to haver an effect on tabular layouts.  You may well find that text gets wrapped inconveniently.  This may not be immediately obvious especially when dates are displayed as month and day names vary considerably in length.
+Simply by changing this class will re-adjust the number of columns used.  **HOWEVER**, this is bound to have an effect on tabular layouts.  You may well find that text gets wrapped inconveniently.  This may not be immediately obvious especially when dates are displayed as month and day names vary considerably in length.
 ===== Breaking the Column Layout =====
 Again looking at line **92** you will see that it also has a class **ax-fixedwidth**.  This forces all panels to obey the assigned column layout,  I.e., it will always try to make panels the same width regardless whether there are enough panels for the selected layout.  Any //orphan// panels will be centred within the page width.
-If you remove this class - **ax-fixedwidth**, any '//orphan//' panels will stretch sideways to fill the page width.  If you don't want this to happen but want a specific panel to be wider, you can leave the class **ax-fixedwidth** but add a class **ax-growX2** to your selected panel to make it span two panel widths.  You can also use '**ax-growX3**' or '**ax-growX4**' to make the panel grow by three or four panel widths.
+If you remove this class - **ax-fixedwidth**, any '//orphan//' panels will stretch sideways to fill the page width.  If you don't want this to happen but want a specific panel to be wider, you can leave the class **ax-fixedwidth** but add a class **ax-growX2** to your selected panel to make it span two panel widths. ++ Note | You can also use '**ax-growX3**' or '**ax-growX4**' to make the panel grow by three or four panel widths. ++
-</wrap>