Responsive Design Made Simple - Revision history

Ghenne: /* Forms */

2016-11-14T22:39:42Z

Forms

← Older revision		Revision as of 22:39, 14 November 2016
Line 149:		Line 149:
	== Forms ==		== Forms ==

	So far, we have worked with Containers. The same techniques will work on [[Form\|forms]]. Forms have a position property. If that is set to 'static' or 'relative', all controls on that form will use ~~the~~ same positioning.		So far, we have worked with Containers. The same techniques will work on [[Form\|forms]]. Forms have a position property. If that is set to 'static' or 'relative', all controls on that form will use that same positioning.

	To make a form which is a maximum 1000 pixels wide, which floats in the middle of the web page, put this in the form's style property:		To make a form which is a maximum 1000 pixels wide, which floats in the middle of the web page, put this in the form's style property:

Ghenne: /* Forms */

2016-11-14T22:38:53Z

Forms

← Older revision		Revision as of 22:38, 14 November 2016
Line 149:		Line 149:
	== Forms ==		== Forms ==

	So far, we have worked with Containers. The same techniques will work on [[Form\|forms]]. Forms have a position property. If that is set to 'relative', all controls on that form will use ~~relative~~ positioning.		So far, we have worked with Containers. The same techniques will work on [[Form\|forms]]. Forms have a position property. If that is set to 'static' or 'relative', all controls on that form will use the same positioning.

	To make a form which is a maximum 1000 pixels wide, which floats in the middle of the web page, put this in the form's style property:		To make a form which is a maximum 1000 pixels wide, which floats in the middle of the web page, put this in the form's style property:

Ghenne: /* A Simple Example */

2016-11-14T22:37:21Z

A Simple Example

← Older revision		Revision as of 22:37, 14 November 2016
Line 23:		Line 23:
	''How does this work?''		''How does this work?''

	One of the style attributes of any control is position. Before AppStudio 5, the only option for this was 'absolute'. Now it can be 'static' or 'relative'. The difference between them is that 'static' ~~ignore~~ top, left, right and bottom, where 'relative' makes ~~uses~~ them. 'Static' is the more pure way of doing this - it is also more predictable.		One of the style attributes of any control is position. Before AppStudio 5, the only option for this was 'absolute'. Now it can be 'static' or 'relative'. The difference between them is that 'static' ignores top, left, right and bottom, where 'relative' makes use of them. 'Static' is the more pure way of doing this - it is also more predictable.

	~~By default~~, all controls in ~~a container~~ have position set to 'static'. Forms also have this option: if position is set to ~~relative~~, the controls on the form will all have their position set to ~~relative~~.		Starting with 6.0.2, all controls in new containers have position set to 'static'. Forms also have this option: if position is set to static, the controls on the form will all have their position set to static.

	The rest of the positioning for the controls is set in the style property of the controls. To center all the controls in the container, we add this to the Container's style control:		The rest of the positioning for the controls is set in the style property of the controls. To center all the controls in the container, we add this to the Container's style control:

Ghenne: /* A Simple Example */

2016-11-14T22:35:42Z

A Simple Example

← Older revision		Revision as of 22:35, 14 November 2016
Line 23:		Line 23:
	''How does this work?''		''How does this work?''

	One of the style attributes of any control is position. Before AppStudio 5, the only option for this was 'absolute'. It can ~~now also~~ be 'relative'. By default, all controls in a container have position set to '~~relative~~'. Forms also have this option: if position is set to relative, the controls on the form will all have their position set to relative.		One of the style attributes of any control is position. Before AppStudio 5, the only option for this was 'absolute'. Now it can be 'static' or 'relative'. The difference between them is that 'static' ignore top, left, right and bottom, where 'relative' makes uses them. 'Static' is the more pure way of doing this - it is also more predictable.

			By default, all controls in a container have position set to 'static'. Forms also have this option: if position is set to relative, the controls on the form will all have their position set to relative.

	The rest of the positioning for the controls is set in the style property of the controls. To center all the controls in the container, we add this to the Container's style control:		The rest of the positioning for the controls is set in the style property of the controls. To center all the controls in the container, we add this to the Container's style control:

Ghenne: /* Forms */

2016-10-11T17:23:15Z

Forms

← Older revision		Revision as of 17:23, 11 October 2016
Line 149:		Line 149:
	So far, we have worked with Containers. The same techniques will work on [[Form\|forms]]. Forms have a position property. If that is set to 'relative', all controls on that form will use relative positioning.		So far, we have worked with Containers. The same techniques will work on [[Form\|forms]]. Forms have a position property. If that is set to 'relative', all controls on that form will use relative positioning.

	To make a form which is a maximum 1000 pixels wide, which floats in the middle of the web page, do:		To make a form which is a maximum 1000 pixels wide, which floats in the middle of the web page, put this in the form's style property:
	<pre>		<pre>
	max-width:1000px; margin-left:auto; margin-right:auto;		max-width:1000px; margin-left:auto; margin-right:auto;
	<pre>		</pre>

	== Media Queries ==		== Media Queries ==

Ghenne: /* Forms */

2016-10-11T17:22:43Z

Forms

← Older revision		Revision as of 17:22, 11 October 2016
Line 148:		Line 148:

	So far, we have worked with Containers. The same techniques will work on [[Form\|forms]]. Forms have a position property. If that is set to 'relative', all controls on that form will use relative positioning.		So far, we have worked with Containers. The same techniques will work on [[Form\|forms]]. Forms have a position property. If that is set to 'relative', all controls on that form will use relative positioning.

			To make a form which is a maximum 1000 pixels wide, which floats in the middle of the web page, do:
			<pre>
			max-width:1000px; margin-left:auto; margin-right:auto;
			<pre>

	== Media Queries ==		== Media Queries ==

Ghenne: /* Using calculations in bounds properties */

2016-04-15T17:13:19Z

Using calculations in bounds properties

← Older revision		Revision as of 17:13, 15 April 2016
Line 121:		Line 121:
	Here's how it looks:		Here's how it looks:

	~~<a href="http~~:~~//blog.nsbasic.com/wp-content/uploads/2015/10/Screen-Shot-2015-10-27-at-4.12.24-PM~~.png"><img src="http://blog.nsbasic.com/wp-content/uploads/2015/10/Screen-Shot-2015-10-27-at-4.12.24-PM.png" alt="Screen Shot 2015-10-27 at 4.12.24 PM" width="775" height="389" class="aligncenter size-full wp-image-2454" /></a>		[[File:CalculatedBounds.png]]

	Here are a few notes about its usage:		Here are a few notes about its usage:

Ghenne: /* Forms */

2016-04-15T17:11:28Z

Forms

← Older revision		Revision as of 17:11, 15 April 2016
Line 100:		Line 100:

	[[File:Rwd05.png]]		[[File:Rwd05.png]]

			== Using calculations in bounds properties ==

			Ever try to center a button on a form? Dead center, from top to bottom, from right to left, no matter how the size of the form changes?

			You can't put a number like 100 into the left or top property. It won't respond to different screen sizes.

			You can't put a percentage (like 50%): it will align the top or left of the button at 50%, not the center of the button.

			There's a handy calc() function you can use instead.
			<!--more-->

			Put the following into your left and top properties:
			<pre>
			left: calc(50% - 100px/2)
			top: calc(50% - 40px/2)
			</pre>
			The 50% gets us the middle of the form, no matter what its current size. The button is 100px by 40px. We divide those values by 2 to put half the control to the left or top of the middle.

			Here's how it looks:

			<a href="http://blog.nsbasic.com/wp-content/uploads/2015/10/Screen-Shot-2015-10-27-at-4.12.24-PM.png"><img src="http://blog.nsbasic.com/wp-content/uploads/2015/10/Screen-Shot-2015-10-27-at-4.12.24-PM.png" alt="Screen Shot 2015-10-27 at 4.12.24 PM" width="775" height="389" class="aligncenter size-full wp-image-2454" /></a>

			Here are a few notes about its usage:
			<ul>
			<li>You can use the 4 basic operators: +, -, *, /.
			<li>Spaces are required on both sides of the operators.
			<li>This is only at Design Time, not Runtime. You can use it in Project Properties, but not in your code.
			<li>You can mix %, px and other measurement types.
			<li>You can use this in any css field which needs a size, such as borders, margins, font sizes, etc.
			<li>You cannot use any variables: just actual sizes.
			</ul>

			<strong>Bonus Feature: min() and max()</strong>

			If you like calc(), you’ll love the min() and max() functions. They accept two or more comma-separated values and return the minimum or maximum accordingly, e.g.
			<pre>
			width: max(50%, 100px)
			height: min(10%, 20px)
			</pre>
			This sets the width to half the screen width, or 100px, whichever is more.
			It sets the height to be 10% of the screen size, but not less than 20 pixels.

			This can prevent an element from getting too big (or too small) if the screen size changes.

	== Forms ==		== Forms ==

Ghenne: /* Media Queries */

2015-06-18T14:30:57Z

Media Queries

← Older revision		Revision as of 14:30, 18 June 2015
Line 134:		Line 134:
	\| max-height \|\| Rules applied for any browser height below the value defined in the query.		\| max-height \|\| Rules applied for any browser height below the value defined in the query.
	\|-		\|-
	\| orientation=portrait \|\| Rules applied for any browser where the height is greater than or equal to the width.		\| orientation:portrait \|\| Rules applied for any browser where the height is greater than or equal to the width.
	\|-		\|-
	\| orientation=landscape \|\| Rules for any browser where the width is greater than the height.		\| orientation:landscape \|\| Rules for any browser where the width is greater than the height.
	\|}		\|}

Ghenne: /* Media Queries */

2015-06-08T22:22:45Z

Media Queries

← Older revision		Revision as of 22:22, 8 June 2015
Line 111:		Line 111:
	Here's a simple example of how you would use a Media Query to adjust your app if it was running in Portrait or Landscape mode:		Here's a simple example of how you would use a Media Query to adjust your app if it was running in Portrait or Landscape mode:
	<pre>		<pre>
	@media (orientation=portrait) {		@media (orientation:portrait) {
	#PictureBox1 {width:300px; height: 200px}		#PictureBox1 {width:300px; height: 200px}
	}		}
	@media (orientation=landscape) {		@media (orientation:landscape) {
	#PictureBox1 {width:600px; height: 400px}		#PictureBox1 {width:600px; height: 400px}
	}		}