mrc logo mrc logo
  • m-Power m-Power
    What is m-Power?
    Overview Demos Build Process Case Studies Specs Pricing Trial
    m-Power Resources
    Overview How-To Videos Webinars & Podcasts White Papers Fact Sheets
  • Solutions Solutions
    What does m-Power build?
    Overview Database Front-Ends Reporting CRM Systems Business Intelligence Dashboards Inventory Management Mobile Apps ERP Enhancements Modernization Spreadsheets to the web MS Access to the web B2B/Web Portals Scheduling Embedded Analytics Web Forms Workflow Data Exploration Budgeting & Forecasting APIs and Web Services Db2 Web Query Alternative
    Solutions by Industry
    Overview Manufacturing Government Foodservice Software Vendors Logistics & Supply Chain Software Consultants Healthcare
  • Services Services
    Development Services Training Mentoring
  • About About
    Overview Partners Press Releases Careers Events Contact Blog
  • Support Support
    Support Home FAQ Documentation Customer Portal Enhancements Updates Roadmap Techblog
Try m-Power

m-Power Manual

Browse:

  • Home
  • Bootstrap Templates
  • Controlling Responsive Design in Bootstrap Templates
Back to Manual

Controlling Responsive Design in Bootstrap Templates

Users who will be creating content for multiple devices (PC and mobile, for instance) may want to add additional logic to better handle how an application responds based on the device accessing the application. This documentation will explain how this works within the m-Power bootstrap templates in two steps. The first step will be creating an example that uses the m-Power layout feature. Step 2 will add in the responsive configuration.

For those users who prefer video documentation, this topic is also covered below:

Step 1: Creating Side by Side Layout

For the example here, I am going to configure m-Power to show 2 panels on my application — a data listing and a map. As you may know, the bootstrap templates are divided into 12 sections (12 sections would equal the width of the entire page). So my data-grid will get half the screen (6 columns) and my map will get the other half (6 columns). More information about the grid layout can be found here.

After compile my base application looks like this:

The first step is to configure m-Power to be laid out in 2 columns of 6. Click the Layout button, then click "Toggle Grid" mode.

Right click in the div with the main table and select "Configure Row Layout" then select the dual column layout of 6.

Complete the layout by dragging your current content into one of the cells:

After clicking OK, m-Painter should resemble this:

After adding content to the right side (in my case, a map), m-Painter now looks like this:

After saving, my run-time content on a PC looks like this:

Step 2: Adding Responsive Configuration

So far, I've created an application that is optimized nicely for a PC. However, this same application looks poor on a smaller device, as the content doesn't fit the device optimally and is cut off:

To fix this, head back to m-Painter and right click inside one of the cells, and select "Grid Row Options" -> "Responsive Column":

You will then be presented with the following screen which lets you control how the selected element should render based on the device. Here we are using standard Bootstrap logic to control the layout. Specifically, the logic always defers to the lowest level then works up. So in our case, the base configuration is to show our data table using 6 of the 12 columns on a small device. Since no other configurations are specified, this applies to all device types.

In our case, we want our data listing and map to be split screen on a PC (where there is enough screen real-estate to fit both elements side by side). On all other devices, we want the map to display under the data table. To do this, we will change the "Extra Small" value to 12 and the "Extra Large" value to 6. This tells m-Power that when this page is opened on a small device use the entire width of the device (12 of 12 columns) to display the element.

I don't need to configure the other options because they will always default to the smaller size configuration if a value hasn't been specified. For instance, on a Tablet, since no value is specified it will revert back to the last available value (that of the extra small). Working our way down, you'll notice that the "Extra Large" value is set at 6. Keep in mind, you can have more than 2 elements or choose other layouts beyond this example! However, please note that at no time should you ever configure a single row to be larger than 12 columns. Ideally, you will want to configure your rows to always equal 12 columns to use the most of your screen real-estate.

Upon pressing OK, you will need to do the same for the other element (the one containing the map).

After saving, the PC view of my application looks like this:

While this application now is fully responsive and looks like this on a smaller device:

Created: May 10, 2018 | Modified: May 17, 2018

Search


Browse By Category

Build Process (13)
Starting with m-Power (8)
Retrievals (10)
Reports (15)
Summaries (4)
Maintainers (17)
Graphs (8)
m-Power Data Explorer (4)
General (24)
Calculations (5)
Utilities (9)
m-Power Administration (23)
Security (11)
Freemarker (6)
m-Painter (29)
Form Validation (5)
External Objects & UDFs (12)
Deprecated Documentation (23)
Bootstrap Templates (7)

Popular Tags

RPG Graph Properties Popular Parameters DB2 Compiling Dropdowns Prompt Screens m-Painter Application Properties Build Process Report mrc-Productivity Series Excel Database External Objects Email Bootstrap Templates Security Calculations Performance Administration Video Summaries Java Production Admin Getting Started Freemarker Graphs SQL Reports Dates App Properties Maintainer Maintainers Bar Graphs Retrievals Graphing Form Validation Tomcat Retrieval Advanced Record Selections Data Dictionary

See all tags »

michaels, ross & cole, ltd. (mrc)

Privacy Policy Cookie Policy Cookie Settings Notice at Collection Do Not Sell or Share My Personal Information

mrc (US)

2001 Midwest Road
Suite 310
Oak Brook, IL 60523
630-916-0662

mrc (UK)

Mortlake Business Centre
20 Mortlake High Street
London, SW14 8JN
+44-20-335-59566


© 2024 mrc. All rights reserved.