![\"AIBlockMess\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/01\/AIBlockMess.png\")
<\/a><\/p>\nYou can\u00a0drag the blocks on the screen so they no longer overlap, but dragging each block\u00a0is\u00a0tedious (time consuming). But\u00a0there\u00a0is an easy way to automatically re-arrange the blocks.<\/p>\n
- \n
- Move the mouse pointer to any part of the white space outside the blocks<\/li>\n
- On Windows, right-click the mouse button<\/li>\n
- On Mac OS X, press Ctrl and click the mouse button<\/li>\n<\/ul>\n
<\/p>\n
A\u00a0pop up menu appears with several options to automatically arrange the blocks:<\/p>\n
![\"Screen](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/01\/Screen-Shot-2015-01-28-at-3.17.02-PM.png\")
<\/a><\/p>\nThe first option “collapses” each block into a single line:<\/p>\n
![\"Screen](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/01\/Screen-Shot-2015-01-28-at-3.20.17-PM.png\")
<\/a><\/p>\nYou can right-click again and choose Expand Blocks<\/em> – or you can right click on individual collapsed blocks to display a pop up menu and an option to expand only the selected block. (You can also right click on a block and collapse individual blocks of code.)<\/p>\n
To arrange the blocks into a vertical order, select the Arrange Blocks Vertically<\/em> option. The block are then arranged into a vertical column up to the maximum number that fit on the screen in your browser window. If there are more blocks (and there always are more blocks!), the additional blocks will appear in vertical columns to the right. You may have to use the scroll bars to see where the blocks were relocated!<\/p>\n
![\"AIBlocksVertical\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/01\/AIBlocksVertical-1024x1024.png\")
<\/a><\/p>\nArrange Blocks Horizontally<\/em> places the block groups across the screen:<\/p>\n
![\"AIHorizonatal\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/01\/AIHorizonatal-1024x265.png\")
<\/a><\/p>\nThis tip may\u00a0make your programming more productive – now, whenever your blocks get too crowded on the screen, let App Inventor’s Blocks editor automatically re-arrange the blocks\u00a0for you.<\/p>\n
(The example code is meaningless – do not try to use this code. This code is an\u00a0old experiment on Bluetooth – a new and expanded version of this will be published here soon.)<\/em><\/p>\n
Bonus Tip!<\/strong><\/p>\n
You can use the “zoom” feature of your browser to zoom in and out of the viewing area in the Blocks editor – this feature enables you to view more blocks on the screen at the same time!<\/p>\n
On Chrome, (shown here from Mac OS X), select Zoom out to display more blocks on the screen.<\/p>\n
![\"Screen](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/01\/Screen-Shot-2015-01-28-at-4.22.39-PM.png\")
<\/a><\/p>\n<\/p>\n
Firefox (on Mac OS X) – use the View menu and then the Zoom option:<\/p>\n
![\"Screen](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/01\/Screen-Shot-2015-01-28-at-4.25.47-PM.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"As you develop your App Inventor program using the Blocks editor, do you find your blocks overlapping\u00a0and crashing in to one another on the screen? You know, like this: You can\u00a0drag the blocks on the screen so they no longer overlap, but dragging each block\u00a0is\u00a0tedious (time consuming). But\u00a0there\u00a0is an easy way to automatically re-arrange the … Continue reading Blocks Editing Tip: Arranging and collapsing blocks in the editor<\/span>