CSSGrid - Revision history

Ghenne: /* alignContent and justifyContent */

2019-11-28T12:51:16Z

alignContent and justifyContent

← Older revision		Revision as of 12:51, 28 November 2019
Line 35:		Line 35:
	\| start \|\| The items are packed flush to each other toward the start edge of the alignment container in the cross axis		\| start \|\| The items are packed flush to each other toward the start edge of the alignment container in the cross axis
	\|-		\|-
	\| end \|\| ~~The items are packed~~ flush ~~to each other toward~~ the end edge of the ~~alignment~~ container ~~in the cross axis~~		\| end \|\| Aligns the grid to be flush with the end edge of the grid container.
	\|-		\|-
	\| center \|\| The items are packed flush to each other toward the center of the alignment container along the cross axis.		\| center \|\| The items are packed flush to each other toward the center of the alignment container along the cross axis.
Line 45:		Line 45:
	\| space-between \|\| Place an even amount of space between each grid item, with no space at the far ends.		\| space-between \|\| Place an even amount of space between each grid item, with no space at the far ends.
	\|-		\|-
	\| space-evenly \|\| ~~The spacing~~ between each ~~pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last~~ item, ~~are all exactly~~ the ~~same~~.		\| space-evenly \|\| Place an even amount of space between each grid item, including the far ends.
	\|}		\|}

Ghenne: /* alignContent and justifyContent */

2019-11-28T12:48:33Z

alignContent and justifyContent

← Older revision		Revision as of 12:48, 28 November 2019
Line 43:		Line 43:
	\| space-around \|\| The empty space before the first and after the last item equals half of the space between each pair of adjacent items.		\| space-around \|\| The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
	\|-		\|-
	\| space-between \|\| ~~The first~~ item ~~is flush with the main-start edge~~, ~~and the last item is flush~~ with the ~~main-end edge~~.		\| space-between \|\| Place an even amount of space between each grid item, with no space at the far ends.
	\|-		\|-
	\| space-evenly \|\| The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.		\| space-evenly \|\| The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

Ghenne at 22:10, 9 March 2019

2019-03-09T22:10:34Z

← Older revision		Revision as of 22:10, 9 March 2019
Line 99:		Line 99:

	[[Category:Controls]]		[[Category:Controls]]

			[[Category:Common]]

	[[Category:General]]		[[Category:General]]

Ghenne: /* Description */

2019-02-10T21:31:13Z

Description

← Older revision		Revision as of 21:31, 10 February 2019
Line 20:		Line 20:
	* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout		* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

			===== NOTE =====

			The CSSGrid will not appear properly in the Design Screen of AppStudio on Windows. The Design Screen uses IE11 to render images: IE11 does not handle the CSSGrid properly. If you run your app in Chrome, it will render properly. MacOS is fine.

	=== alignContent and justifyContent ===		=== alignContent and justifyContent ===

Ghenne: /* Description */

2019-02-04T13:48:17Z

Description

← Older revision		Revision as of 13:48, 4 February 2019
Line 15:		Line 15:
	At runtime, controls can be added as children to the CSSGrid or CSSGridItems using the addChild() function: <code>CSSGrid.addChild(Button1)</code>.		At runtime, controls can be added as children to the CSSGrid or CSSGridItems using the addChild() function: <code>CSSGrid.addChild(Button1)</code>.

	Here are some useful resources for learning more about using ~~CSDGrid~~:		Here are some useful resources for learning more about using CSSGrid:
	* https://www.w3schools.com/css/css_grid.asp		* https://www.w3schools.com/css/css_grid.asp
	* https://css-tricks.com/snippets/css/complete-guide-grid/		* https://css-tricks.com/snippets/css/complete-guide-grid/

Ghenne: /* Description */

2019-02-04T13:47:52Z

Description

← Older revision		Revision as of 13:47, 4 February 2019
Line 11:		Line 11:
	CSSGrids can contain other CSSGrids.		CSSGrids can contain other CSSGrids.

	To add a CSSGrid control to your app, choose the CSSGrid icon in the ~~Toolbar~~, then position it on the Design Screen. Use the Property Editor to set the properties you need. Right click in the CSSGrid to add children.		To add a CSSGrid control to your app, choose the CSSGrid icon in the Toolbox, then position it on the Design Screen. Use the Property Editor to set the properties you need. Right click in the CSSGrid to add children.

	At runtime, controls can be added as children to the CSSGrid or CSSGridItems using the addChild() function: <code>CSSGrid.addChild(Button1)</code>.		At runtime, controls can be added as children to the CSSGrid or CSSGridItems using the addChild() function: <code>CSSGrid.addChild(Button1)</code>.

Ghenne: /* Description */

2019-02-04T13:44:21Z

Description

← Older revision		Revision as of 13:44, 4 February 2019
Line 3:		Line 3:
	== Description ==		== Description ==

	The ~~CSS Grid Layout Module offers~~ a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.		The CSSGrid control provides a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

	While regular controls (such as Buttons and Labels) can be added directly to a CSSGrid, there is a special control called [[CSSGridItem]] which is used to define sections within the Grid. CSSGridItems can be combined to make irregular sections in the CSSGrid. In the above example, the top row of the CSSGrid has been merged into a single control called Header.		While regular controls (such as Buttons and Labels) can be added directly to a CSSGrid, there is a special control called [[CSSGridItem]] which is used to define sections within the Grid. CSSGridItems can be combined to make irregular sections in the CSSGrid. In the above example, the top row of the CSSGrid has been merged into a single control called Header.

Ghenne: /* Other Properties */

2019-02-04T13:15:08Z

Other Properties

← Older revision		Revision as of 13:15, 4 February 2019
Line 82:		Line 82:
	\| innerHTML \|\| The text to use in between the HTML tags. Can be text or HTML. Run time. At Design Time,, use content.		\| innerHTML \|\| The text to use in between the HTML tags. Can be text or HTML. Run time. At Design Time,, use content.
	\|-		\|-
	\| position \|\| How children positioned. Default is 'relative': elements are positioned relative to each other and the size of the ~~FlexBox~~. With 'absolute', controls are positioned within the ~~FlexBox~~ set by width and height. Other options are 'fixed' and 'static'. Design time.		\| position \|\| How children positioned. Default is 'relative': elements are positioned relative to each other and the size of the CSSGrid. With 'absolute', controls are positioned within the CSSGrid set by width and height. Other options are 'fixed' and 'static'. Design time.
	\|-		\|-
	\| style \|\| A list of [[style]] properties, each in the form styleName:value; Example: "height:40px; width:100px".Design time.		\| style \|\| A list of [[style]] properties, each in the form styleName:value; Example: "height:40px; width:100px".Design time.

Ghenne: /* Examples */

2019-02-04T11:54:05Z

Examples

← Older revision		Revision as of 11:54, 4 February 2019
Line 92:		Line 92:

	== Examples ==		== Examples ==

	~~=== Change the color of the text ===~~
	~~<pre>~~
	~~FlexBox1.style.color = "red"~~
	~~</pre>~~

	[[Category:Language Reference]]		[[Category:Language Reference]]

Ghenne: /* Other Properties */

2019-02-04T11:53:39Z

Other Properties

← Older revision		Revision as of 11:53, 4 February 2019
Line 79:		Line 79:
	\|-		\|-
	\| content \|\| The text to use in between the HTML tags. Can be text or HTML. Design time. At runtime, use .innerHTML.		\| content \|\| The text to use in between the HTML tags. Can be text or HTML. Design time. At runtime, use .innerHTML.
	\|-
	\| HTMLTag \|\| The [http://www.w3schools.com/tags/ HTML tag] of the control. Common values are div, button, text, ol, etc. For example. if value is 'button', then this HTML will be created: <button>''content''</button>. Design time.
	\|-		\|-
	\| innerHTML \|\| The text to use in between the HTML tags. Can be text or HTML. Run time. At Design Time,, use content.		\| innerHTML \|\| The text to use in between the HTML tags. Can be text or HTML. Run time. At Design Time,, use content.