{"id":425,"date":"2015-06-27T16:48:07","date_gmt":"2015-06-27T23:48:07","guid":{"rendered":"http:\/\/www.icetips.com\/blog_wp\/?p=425"},"modified":"2015-06-27T16:48:07","modified_gmt":"2015-06-27T23:48:07","slug":"aligning-controls-using-snap-lines","status":"publish","type":"post","link":"http:\/\/www.icetips.com\/blog_wp\/2015\/06\/27\/aligning-controls-using-snap-lines\/","title":{"rendered":"Aligning controls using snap lines"},"content":{"rendered":"<p>In the new IDE you can align controls using the snap lines; the thin blue lines that pop up when you drag controls around in the window designer. You see it appear in the screenshot below between the \"Property\" radio button and the drop down control, indicating that they are being align by the bottom edge of the controls.<\/p>\n<figure id=\"attachment_426\" aria-describedby=\"caption-attachment-426\" style=\"width: 294px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10Snaplines.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-426 size-full\" src=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10Snaplines.png\" alt=\"Clarion 10 Snap lines and distance lines\" width=\"294\" height=\"66\" \/><\/a><figcaption id=\"caption-attachment-426\" class=\"wp-caption-text\">Clarion 10 Snap lines and distance lines<\/figcaption><\/figure>\n<p>You can also see two short lines above the drop down, which indicate optimal vertical space between the drop down control and the two radio buttons above. \u00a0The distance lines appear for both horizontal and vertical spacing.<\/p>\n<p>The snap lines also appear when you are re-sizing controls which can be both good and bad. \u00a0It's good when you need to size multiple controls to be the same width or height, but it gets in the way if you just want to re-size a control, like for example the \"Me and related users\" radio button which originally extended outside of the group control, overlapping the border of the group.<\/p>\n<p>You can re-size a control by\u00a0holding down the shift key and then using the left\/right, up\/down arrow keys. \u00a0But you can also re-size them by using the mouse and without the snap lines getting in the way. \u00a0Simply hold down the Alt key on the keyboard and re-size or move the control with the mouse. \u00a0It will now ignore the snap lines and you can re-size and re-position at will. \u00a0Release the Alt key and the snap lines immediately appear and the control snaps into place.<\/p>\n<p>Snap lines also work with multiple controls selected.<\/p>\n<figure id=\"attachment_427\" aria-describedby=\"caption-attachment-427\" style=\"width: 650px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10SnaplinesMultipleControls.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-427 size-full\" src=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10SnaplinesMultipleControls.png\" alt=\"Clarion 10 Snap lines on multiple controls\" width=\"650\" height=\"91\" srcset=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10SnaplinesMultipleControls.png 650w, http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10SnaplinesMultipleControls-300x42.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><figcaption id=\"caption-attachment-427\" class=\"wp-caption-text\">Clarion 10 Snap lines on multiple controls<\/figcaption><\/figure>\n<p>I use the snap lines a lot when lining things up and also the distance lines to set the distance from one control to another. \u00a0To the best of my knowledge they are not customizable in the IDE's Options, which would be desired so the distance can be changed.<\/p>\n<figure id=\"attachment_428\" aria-describedby=\"caption-attachment-428\" style=\"width: 685px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10OptionsDesignerGridOptions.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-428 size-full\" src=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10OptionsDesignerGridOptions.png\" alt=\"Clarion 10 Window Designer Grid Options\" width=\"685\" height=\"383\" srcset=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10OptionsDesignerGridOptions.png 685w, http:\/\/www.icetips.com\/blog_wp\/wp-content\/uploads\/2015\/06\/Clarion10OptionsDesignerGridOptions-300x168.png 300w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/a><figcaption id=\"caption-attachment-428\" class=\"wp-caption-text\">Clarion 10 Window Designer Grid Options<\/figcaption><\/figure>\n<p>You also have the option to use grids. \u00a0In my (limited) experience with grids in other environments, they tend to be coarse and not very helpful. \u00a0But this is a matter of choice and taste so please try them out to see how they work and if you like them or not.<\/p>\n<p>There is no option to turn <strong>both<\/strong> grids and snap lines off. \u00a0Either one is always turned on. \u00a0However, with the grids you can turn off the \"Snap to Grid\" effectively disabling it and if you uncheck \"Show grid\" then it will not show up either so with that you have turned both grid and snap lines off. \u00a0It would have made sense to have a \"None\" radio button there for the Align Mode, but with the ability to select Grid and then effectively turning it off, it serves the same purpose.<\/p>\n<p><em>Arnor Baldvinsson<\/em><\/p>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_425\" class=\"pvc_stats all  \" data-element-id=\"425\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In the new IDE you can align controls using the snap lines; the thin blue lines that pop up when you drag controls around in the window designer. You see it appear in the screenshot below between the \"Property\" radio button and the drop down control, indicating that they are being align by the bottom <a href=\"http:\/\/www.icetips.com\/blog_wp\/2015\/06\/27\/aligning-controls-using-snap-lines\/\" class=\"more-link\">...continue reading <span class=\"screen-reader-text\">Aligning controls using snap lines<\/span><\/a><\/p>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_425\" class=\"pvc_stats all  \" data-element-id=\"425\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"http:\/\/www.icetips.com\/blog_wp\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[17,5],"tags":[],"class_list":["post-425","post","type-post","status-publish","format-standard","hentry","category-clarion-10","category-technical"],"_links":{"self":[{"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/posts\/425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":1,"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"predecessor-version":[{"id":429,"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/posts\/425\/revisions\/429"}],"wp:attachment":[{"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.icetips.com\/blog_wp\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}