{"id":8740,"date":"2017-09-13T12:13:07","date_gmt":"2017-09-13T17:13:07","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/docs\/?page_id=8740"},"modified":"2023-12-06T14:39:11","modified_gmt":"2023-12-06T20:39:11","slug":"grid-layout","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/grid-layout","title":{"rendered":"Controlling HTML Layout with Grid Mode"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Click <a href=\"https:\/\/www.mrc-productivity.com\/legacy\/m-painter-app-prop\/grid-layout\">here <\/a>to view the legacy documentation for this feature.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Overview<\/h3>\n\n\n\n<p>Controlling the layout of elements on an HTML page has a tendency to be a clunky and time-expensive task. The Grid Layout feature from m-Painter allows developers to have much easier control with adding new elements to the page as well as having pinpoint control of where they are located. This document will demonstrate how to configure the grid row layout of an application&#8217;s HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Video Overview<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Working with Form &amp; Grid Layout\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/h88zB-AQiao?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Toggling Grid Mode<\/h3>\n\n\n\n<p>Clicking the &#8216;Layout&#8217; button from the main menu allows the developer to toggle either &#8220;Form&#8221; or &#8220;Grid&#8221; Mode. To enter grid mode, click on the &#8220;Grid&#8221; button.<\/p>\n\n\n\n<p>Once Grid Mode is enabled, the WYSIWYG page separates each element on the page into an independent and outlined section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/gridBoxes.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/gridBoxes.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Hovering over a section will highlight which row is currently active and will indicate this by outlining the section in blue. Hovering over the desired section will show the green grid layout menu.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Click <a href=\"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/working-with-form-layout-grid-layout\">here <\/a>to learn more about Layout &#8211; Form mode.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Grid Row Options<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/layout2.png\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Up arrow \u2014 Inserts a row above your selected row<\/li>\n\n\n\n<li>Down arrow \u2014 Inserts a row below your selected row<\/li>\n\n\n\n<li>Left arrow \u2014 Insert a column to the left of your selected element<\/li>\n\n\n\n<li>Right arrow \u2014 Insert a column to the right of your selected element<\/li>\n\n\n\n<li>Plus icon \u2014 Increases the size of the selected element. Keep in mind your page is organized by 12 columns. This means that, by adjusting the size of the columns, you are instructing m-Power to take up some of those 12 available columns.<\/li>\n\n\n\n<li>Minus icon \u2014 Decreases the size of the selected element.<\/li>\n\n\n\n<li>Box icon \u2014 Wraps the selected element in a container.<\/li>\n\n\n\n<li>Trash icon \u2014 Removes the selected icon.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Configure Row Layout<\/h3>\n\n\n\n<p>To control the layout of the row, utilize the arrows and plus\/minus icons on the hover menu to properly resize the selected HTML elements. <\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Remember that in Bootstrap, pages are laid out in a 12 column layout. So the smallest you can resize a column is to take up one of the available 12 columns.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview Controlling the layout of elements on an HTML page has a tendency to be a clunky and time-expensive task. The Grid Layout feature from m-Painter allows developers to have much easier control with adding new elements to the page as well as having pinpoint control of where they are&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[255],"ht-kb-tag":[],"class_list":["post-8740","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=8740"}],"version-history":[{"count":30,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8740\/revisions"}],"predecessor-version":[{"id":13878,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8740\/revisions\/13878"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=8740"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=8740"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=8740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}