Keyboard Navigation

This example showcases the support for keyboard navigation in DataViews.

Description
index.html
app.js
data.js
styles.css

This example showcases the support for keyboard navigation in DataViews. The bottom view is navigable and is used to page through the detail cards in the top view. The top view uses the DataViews card layout engine, which is described in the "Card Layout Engine" demo.

Keys to this demo:

  • The example uses arrow up/down and page up/down keys to navigate the bottom grid view and fires an event to load data in the top view when focus changes.
  • The allowFocus option is set to true. This allows you to handle the focusRowChanged event when focus changes.
  • The updateData function loads the data into the detail view.
This example showcases the support for keyboard navigation in DataViews. The bottom view is navigable and is used to page through the detail cards in the top view. The top view uses the DataViews card layout engine, which is described in the "Card Layout Engine" demo. Keys to this demo: The example uses arrow up/down and page up/down keys to navigate the bottom grid view and fires an event to load data in the top view when focus changes. The allowFocus option is set to true. This allows you to handle the focusRowChanged event when focus changes. The updateData function loads the data into the detail view.
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Rows/KeyboardNavigation/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="rows, keyboard" /> <meta name="description" content="This example showcases the support for keyboard navigation in DataViews." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Keyboard Navigation | Features | MESCIUS DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr', SJS_LICENSE_KEY: 'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep', }, }; </script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> </head> <body class="theme-default"> <noscript>You need to enable JavaScript to run this app.</noscript> <template id="carInfo" style="display: none"> <div class="info-container"> <div data-column="Photo" class="photoInfo"></div> <table class="carInfo"> <tbody> <tr> <td>Displacement</td> <td data-column="Displacement"></td> </tr> <tr> <td>Horsepower</td> <td data-column="Horsepower"></td> </tr> <tr> <td>Weight/lbs</td> <td data-column="Weight_in_lbs"></td> </tr> <tr> <td>Acceleration</td> <td data-column="Acceleration"></td> </tr> </tbody> </table> </div> </template> <div class="main-container"> <div class="section"> <p style="margin: 5px">Focus row information</p> <div id="grid2" style="height: 167px; margin-top: 5px"></div> <p style="margin: 5px">Use row up/down or page up/down to navigate the focus row</p> </div> <div id="grid" style="height: 250px"></div> </div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var cols1 = [ { id: 'Name', caption: 'CarName', dataField: 'Name', }, { id: 'Year', caption: 'Year', dataField: 'Year', }, { id: 'Miles_per_Gallon', caption: 'Miles/Gallon', dataField: 'Miles_per_Gallon', }, { id: 'Cylinders', caption: 'Cylinders', dataField: 'Cylinders', }, ]; var dataView1 = new GC.DataViews.DataView( document.getElementById('grid'), data, cols1, new GC.DataViews.GridLayout({ rowHeight: 36, selectionMode: 'none', colMinWidth: 120, }) ); // focus data.view by default document.getElementById('grid').focus(); var photoPresenter = '<img class="photo" src={{=it.Photo}} />'; var cols2 = [ { id: 'Displacement', caption: 'Displacement', dataField: 'Displacement', width: '*', }, { id: 'Horsepower', caption: 'Horsepower', dataField: 'Horsepower', width: '*', }, { id: 'Weight_in_lbs', caption: 'Weight', dataField: 'Weight_in_lbs', format: '#,##', width: '*', }, { id: 'Acceleration', caption: 'Weight', dataField: 'Acceleration', width: '*', }, { id: 'Origin', caption: 'Origin', dataField: 'Origin', width: '*', }, { id: 'Photo', dataField: 'Photo', presenter: photoPresenter, }, ]; var data2 = [data[0]]; var dataView2 = new GC.DataViews.DataView( document.getElementById('grid2'), data2, cols2, new GC.DataViews.CardLayout({ cardHeight: 165, rowTemplate: '#carInfo', direction: 'horizontal', }) ); dataView1.focusChanged.addHandler(function (e) { var sourceIndex = e.sourceRow; if (sourceIndex >= 0) { dataView2.data.updateItem(0, data[sourceIndex]); } });
// cars var SITE_ROOT = window.process.env.SITE_ROOT; var data = [{ Name: 'chevrolet chevelle malibu', Miles_per_Gallon: 18, Cylinders: 8, Displacement: 307, Horsepower: 130, Weight_in_lbs: 3504, Acceleration: 12, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/chevroletchevellemalibu.jpg' }, { Name: 'buick skylark 320', Miles_per_Gallon: 15, Cylinders: 8, Displacement: 350, Horsepower: 165, Weight_in_lbs: 3693, Acceleration: 11.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/buickskylark320.jpg' }, { Name: 'plymouth satellite', Miles_per_Gallon: 18, Cylinders: 8, Displacement: 318, Horsepower: 150, Weight_in_lbs: 3436, Acceleration: 11, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/plymouthsatellite.jpg' }, { Name: 'amc rebel sst', Miles_per_Gallon: 16, Cylinders: 8, Displacement: 304, Horsepower: 150, Weight_in_lbs: 3433, Acceleration: 12, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/amcrebelsst.jpg' }, { Name: 'ford torino', Miles_per_Gallon: 17, Cylinders: 8, Displacement: 302, Horsepower: 140, Weight_in_lbs: 3449, Acceleration: 10.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/fordtorino.jpg' }, { Name: 'ford galaxie 500', Miles_per_Gallon: 15, Cylinders: 8, Displacement: 429, Horsepower: 198, Weight_in_lbs: 4341, Acceleration: 10, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/fordgalaxie500.jpg' }, { Name: 'chevrolet impala', Miles_per_Gallon: 14, Cylinders: 8, Displacement: 454, Horsepower: 220, Weight_in_lbs: 4354, Acceleration: 9, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/chevroletimpala.jpg' }, { Name: 'plymouth fury iii', Miles_per_Gallon: 14, Cylinders: 8, Displacement: 440, Horsepower: 215, Weight_in_lbs: 4312, Acceleration: 8.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/plymouthfuryiii.jpg' }, { Name: 'pontiac catalina', Miles_per_Gallon: 14, Cylinders: 8, Displacement: 455, Horsepower: 225, Weight_in_lbs: 4425, Acceleration: 10, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/pontiaccatalina.jpg' }, { Name: 'amc ambassador dpl', Miles_per_Gallon: 15, Cylinders: 8, Displacement: 390, Horsepower: 190, Weight_in_lbs: 3850, Acceleration: 8.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/amcambassadordpl.jpg' }, { Name: 'citroen ds-21 pallas', Miles_per_Gallon: 14, Cylinders: 4, Displacement: 133, Horsepower: 115, Weight_in_lbs: 3090, Acceleration: 17.5, Year: 1970, Origin: 'B', Photo: SITE_ROOT + '/images/citroends-21pallas.jpg' }, { Name: 'chevrolet chevelle concours (sw)', Miles_per_Gallon: 15, Cylinders: 8, Displacement: 350, Horsepower: 165, Weight_in_lbs: 4142, Acceleration: 11.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/chevroletchevelleconcours(sw).jpg' }, { Name: 'ford torino (sw)', Miles_per_Gallon: 16, Cylinders: 8, Displacement: 351, Horsepower: 153, Weight_in_lbs: 4034, Acceleration: 11, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/fordtorino(sw).jpg' }, { Name: 'plymouth satellite (sw)', Miles_per_Gallon: 14, Cylinders: 8, Displacement: 383, Horsepower: 175, Weight_in_lbs: 4166, Acceleration: 10.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/plymouthsatellite(sw).jpg' }, { Name: 'amc rebel sst (sw)', Miles_per_Gallon: 18, Cylinders: 8, Displacement: 360, Horsepower: 175, Weight_in_lbs: 3850, Acceleration: 11, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/amcrebelsst(sw).jpg' }, { Name: 'dodge challenger se', Miles_per_Gallon: 15, Cylinders: 8, Displacement: 383, Horsepower: 170, Weight_in_lbs: 3563, Acceleration: 10, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/dodgechallengerse.jpg' }, { Name: "plymouth 'cuda 340", Miles_per_Gallon: 14, Cylinders: 8, Displacement: 340, Horsepower: 160, Weight_in_lbs: 3609, Acceleration: 8, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/plymouthcuda340.jpg' }, { Name: 'ford mustang boss 302', Miles_per_Gallon: 15, Cylinders: 8, Displacement: 302, Horsepower: 140, Weight_in_lbs: 3353, Acceleration: 8, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/fordmustangboss302.jpg' }, { Name: 'chevrolet monte carlo', Miles_per_Gallon: 15, Cylinders: 8, Displacement: 400, Horsepower: 150, Weight_in_lbs: 3761, Acceleration: 9.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/chevroletmontecarlo.jpg' }, { Name: 'buick estate wagon (sw)', Miles_per_Gallon: 14, Cylinders: 8, Displacement: 455, Horsepower: 225, Weight_in_lbs: 3086, Acceleration: 10, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/buickestatewagon(sw).jpg' }, { Name: 'toyota corona mark ii', Miles_per_Gallon: 24, Cylinders: 4, Displacement: 113, Horsepower: 95, Weight_in_lbs: 2372, Acceleration: 15, Year: 1970, Origin: 'C', Photo: SITE_ROOT + '/images/toyotacoronamarkii.jpg' }, { Name: 'plymouth duster', Miles_per_Gallon: 22, Cylinders: 6, Displacement: 198, Horsepower: 95, Weight_in_lbs: 2833, Acceleration: 15.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/plymouthduster.jpg' }, { Name: 'amc hornet', Miles_per_Gallon: 18, Cylinders: 6, Displacement: 199, Horsepower: 97, Weight_in_lbs: 2774, Acceleration: 15.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/amchornet.jpg' }, { Name: 'ford maverick', Miles_per_Gallon: 21, Cylinders: 6, Displacement: 200, Horsepower: 85, Weight_in_lbs: 2587, Acceleration: 16, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/fordmaverick.jpg' }, { Name: 'datsun pl510', Miles_per_Gallon: 27, Cylinders: 4, Displacement: 97, Horsepower: 88, Weight_in_lbs: 2130, Acceleration: 14.5, Year: 1970, Origin: 'C', Photo: SITE_ROOT + '/images/datsunpl510.jpg' }, { Name: 'volkswagen 1131 deluxe sedan', Miles_per_Gallon: 26, Cylinders: 4, Displacement: 97, Horsepower: 46, Weight_in_lbs: 1835, Acceleration: 20.5, Year: 1970, Origin: 'B', Photo: SITE_ROOT + '/images/volkswagen1131deluxesedan.jpg' }, { Name: 'peugeot 504', Miles_per_Gallon: 25, Cylinders: 4, Displacement: 110, Horsepower: 87, Weight_in_lbs: 2672, Acceleration: 17.5, Year: 1970, Origin: 'B', Photo: SITE_ROOT + '/images/peugeot504.jpg' }, { Name: 'audi 100 ls', Miles_per_Gallon: 24, Cylinders: 4, Displacement: 107, Horsepower: 90, Weight_in_lbs: 2430, Acceleration: 14.5, Year: 1970, Origin: 'B', Photo: SITE_ROOT + '/images/audi100ls.jpg' }, { Name: 'saab 99e', Miles_per_Gallon: 25, Cylinders: 4, Displacement: 104, Horsepower: 95, Weight_in_lbs: 2375, Acceleration: 17.5, Year: 1970, Origin: 'B', Photo: SITE_ROOT + '/images/saab99e.jpg' }, { Name: 'bmw 2002', Miles_per_Gallon: 26, Cylinders: 4, Displacement: 121, Horsepower: 113, Weight_in_lbs: 2234, Acceleration: 12.5, Year: 1970, Origin: 'B', Photo: SITE_ROOT + '/images/bmw2002.jpg' }, { Name: 'amc gremlin', Miles_per_Gallon: 21, Cylinders: 6, Displacement: 199, Horsepower: 90, Weight_in_lbs: 2648, Acceleration: 15, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/amcgremlin.jpg' }, { Name: 'ford f250', Miles_per_Gallon: 10, Cylinders: 8, Displacement: 360, Horsepower: 215, Weight_in_lbs: 4615, Acceleration: 14, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/fordf250.jpg' }, { Name: 'chevy c20', Miles_per_Gallon: 10, Cylinders: 8, Displacement: 307, Horsepower: 200, Weight_in_lbs: 4376, Acceleration: 15, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/chevyc20.jpg' }, { Name: 'dodge d200', Miles_per_Gallon: 11, Cylinders: 8, Displacement: 318, Horsepower: 210, Weight_in_lbs: 4382, Acceleration: 13.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/dodged200.jpg' }, { Name: 'hi 1200d', Miles_per_Gallon: 9, Cylinders: 8, Displacement: 304, Horsepower: 193, Weight_in_lbs: 4732, Acceleration: 18.5, Year: 1970, Origin: 'A', Photo: SITE_ROOT + '/images/hi1200d.jpg' }, { Name: 'datsun pl510', Miles_per_Gallon: 27, Cylinders: 4, Displacement: 97, Horsepower: 88, Weight_in_lbs: 2130, Acceleration: 14.5, Year: 1971, Origin: 'C', Photo: SITE_ROOT + '/images/datsunpl510.jpg' }, { Name: 'chevrolet vega 2300', Miles_per_Gallon: 28, Cylinders: 4, Displacement: 140, Horsepower: 90, Weight_in_lbs: 2264, Acceleration: 15.5, Year: 1971, Origin: 'A', Photo: SITE_ROOT + '/images/chevroletvega2300.jpg' }, { Name: 'toyota corona', Miles_per_Gallon: 25, Cylinders: 4, Displacement: 113, Horsepower: 95, Weight_in_lbs: 2228, Acceleration: 14, Year: 1971, Origin: 'C', Photo: SITE_ROOT + '/images/toyotacorona.jpg' }, { Name: 'ford pinto', Miles_per_Gallon: 25, Cylinders: 4, Displacement: 98, Horsepower: null, Weight_in_lbs: 2046, Acceleration: 19, Year: 1971, Origin: 'A', Photo: SITE_ROOT + '/images/fordpinto.jpg' }, { Name: 'volkswagen super beetle 117', Miles_per_Gallon: 24, Cylinders: 4, Displacement: 97, Horsepower: 48, Weight_in_lbs: 1978, Acceleration: 20, Year: 1971, Origin: 'B', Photo: SITE_ROOT + '/images/volkswagen1131deluxesedan.jpg' }, { Name: 'amc gremlin', Miles_per_Gallon: 19, Cylinders: 6, Displacement: 232, Horsepower: 100, Weight_in_lbs: 2634, Acceleration: 13, Year: 1971, Origin: 'A', Photo: SITE_ROOT + '/images/amcgremlin.jpg' }, { Name: 'plymouth satellite custom', Miles_per_Gallon: 16, Cylinders: 6, Displacement: 225, Horsepower: 105, Weight_in_lbs: 3439, Acceleration: 15.5, Year: 1971, Origin: 'A', Photo: SITE_ROOT + '/images/plymouthsatellitecustom.jpg' }, { Name: 'chevrolet chevelle malibu', Miles_per_Gallon: 17, Cylinders: 6, Displacement: 250, Horsepower: 100, Weight_in_lbs: 3329, Acceleration: 15.5, Year: 1971, Origin: 'A', Photo: SITE_ROOT + '/images/chevroletchevellemalibu.jpg' }, { Name: 'ford torino 500', Miles_per_Gallon: 19, Cylinders: 6, Displacement: 250, Horsepower: 88, Weight_in_lbs: 3302, Acceleration: 15.5, Year: 1971, Origin: 'A', Photo: SITE_ROOT + '/images/fordtorino500.jpg' }, { Name: 'amc matador', Miles_per_Gallon: 18, Cylinders: 6, Displacement: 232, Horsepower: 100, Weight_in_lbs: 3288, Acceleration: 15.5, Year: 1971, Origin: 'A', Photo: SITE_ROOT + '/images/amcmatador.jpg' }, { Name: 'chevrolet impala', Miles_per_Gallon: 14, Cylinders: 8, Displacement: 350, Horsepower: 165, Weight_in_lbs: 4209, Acceleration: 12, Year: 1971, Origin: 'A', Photo: SITE_ROOT + '/images/chevroletimpala.jpg' }];
.main-container { width: 100%; height: 100%; display: flex; flex-direction: column; } .main-container p.tip { margin: 5px; } .section { flex: 0 1 auto; } #grid { flex: 1 1 auto; } #grid2 { height: 167px; margin-top: 5px; width: 400px; } #grid2 .gc-grid { background: #333; border-color: #333; border-radius: 4px; } .info-container { display: flex; flex-direction: row; } .photoInfo { display: inline-block; height: 165px; line-height: 165px; margin: 0; margin-right: 10px; padding: 0; position: relative; vertical-align: middle; width: 230px; } .photoInfo:before { border-color: transparent transparent #333 transparent; border-style: solid; border-width: 0 0 165px 50px; content: " "; height: 0; left: 180px; position: absolute; top: 0; width: 0; } .carInfo { display: inline-block; vertical-align: middle; flex: 1 1 auto; padding: 0.4em; } .carInfo tr { vertical-align: baseline; } .carInfo td { border-bottom: solid 1px #666; color: #fff; padding: 0.4em; height: 1.25rem; } .carInfo td:last-child { text-align: right; padding-left: 1em; } @media only screen and (max-width: 768px) { #grid2 { width: 375px; } .photoInfo { width: 170px; } .photoInfo:before { left: 120px; } .carInfo td { width: auto; } } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd3MvS2V5Ym9hcmROYXZpZ2F0aW9uL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL1Jvd3MvS2V5Ym9hcmROYXZpZ2F0aW9uL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7RUFDQSxhQUFBO0VBQ0Esc0JBQUE7QUNDRjtBRENFO0VBQ0UsV0FBQTtBQ0NKOztBREdBO0VBQ0UsY0FBQTtBQ0FGOztBREdBO0VBQ0UsY0FBQTtBQ0FGOztBREdBO0VBQ0UsYUFBQTtFQUNBLGVBQUE7RUFDQSxZQUFBO0FDQUY7O0FER0E7RUFDRSxnQkFBQTtFQUNBLGtCQUFBO0VBQ0Esa0JBQUE7QUNBRjs7QURHQTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtBQ0FGOztBREdBO0VBQ0UscUJBQUE7RUFDQSxhQUFBO0VBQ0Esa0JBQUE7RUFDQSxTQUFBO0VBQ0Esa0JBQUE7RUFDQSxVQUFBO0VBQ0Esa0JBQUE7RUFDQSxzQkFBQTtFQUNBLFlBQUE7QUNBRjs7QURHQTtFQUNFLHNEQUFBO0VBQ0EsbUJBQUE7RUFDQSw0QkFBQTtFQUNBLFlBQUE7RUFDQSxTQUFBO0VBQ0EsV0FBQTtFQUNBLGtCQUFBO0VBQ0EsTUFBQTtFQUNBLFFBQUE7QUNBRjs7QURHQTtFQUNFLHFCQUFBO0VBQ0Esc0JBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtBQ0FGOztBREdBO0VBQ0Usd0JBQUE7QUNBRjs7QURHQTtFQUNFLDZCQUFBO0VBQ0EsV0FBQTtFQUNBLGNBQUE7RUFDQSxlQUFBO0FDQUY7O0FER0E7RUFDRSxpQkFBQTtFQUNBLGlCQUFBO0FDQUY7O0FER0E7RUFDRTtJQUNFLFlBQUE7RUNBRjs7RURHQTtJQUNFLFlBQUE7RUNBRjs7RURHQTtJQUNFLFdBQUE7RUNBRjs7RURHQTtJQUNFLFdBQUE7RUNBRjtBQUNGIiwiZmlsZSI6IkZlYXR1cmVzL1Jvd3MvS2V5Ym9hcmROYXZpZ2F0aW9uL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblxuICBwLnRpcCB7XG4gICAgbWFyZ2luOiA1cHg7XG4gIH1cbn1cblxuLnNlY3Rpb24ge1xuICBmbGV4OiAwIDEgYXV0bztcbn1cblxuI2dyaWQge1xuICBmbGV4OiAxIDEgYXV0bztcbn1cblxuI2dyaWQyIHtcbiAgaGVpZ2h0OiAxNjdweDtcbiAgbWFyZ2luLXRvcDogNXB4O1xuICB3aWR0aDogNDAwcHg7XG59XG5cbiNncmlkMiAuZ2MtZ3JpZCB7XG4gIGJhY2tncm91bmQ6ICMzMzM7XG4gIGJvcmRlci1jb2xvcjogIzMzMztcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xufVxuXG4uaW5mby1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xufVxuXG4ucGhvdG9JbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBoZWlnaHQ6IDE2NXB4O1xuICBsaW5lLWhlaWdodDogMTY1cHg7XG4gIG1hcmdpbjogMDtcbiAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xuICBwYWRkaW5nOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHdpZHRoOiAyMzBweDtcbn1cblxuLnBob3RvSW5mbzpiZWZvcmUge1xuICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50ICMzMzMgdHJhbnNwYXJlbnQ7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci13aWR0aDogMCAwIDE2NXB4IDUwcHg7XG4gIGNvbnRlbnQ6ICcgJztcbiAgaGVpZ2h0OiAwO1xuICBsZWZ0OiAxODBweDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHdpZHRoOiAwO1xufVxuXG4uY2FySW5mbyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgZmxleDogMSAxIGF1dG87XG4gIHBhZGRpbmc6IDAuNGVtO1xufVxuXG4uY2FySW5mbyB0ciB7XG4gIHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcbn1cblxuLmNhckluZm8gdGQge1xuICBib3JkZXItYm90dG9tOiBzb2xpZCAxcHggIzY2NjtcbiAgY29sb3I6ICNmZmY7XG4gIHBhZGRpbmc6IDAuNGVtO1xuICBoZWlnaHQ6IDEuMjVyZW07XG59XG5cbi5jYXJJbmZvIHRkOmxhc3QtY2hpbGQge1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAgcGFkZGluZy1sZWZ0OiAxZW07XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgI2dyaWQyIHtcbiAgICB3aWR0aDogMzc1cHg7XG4gIH1cblxuICAucGhvdG9JbmZvIHtcbiAgICB3aWR0aDogMTcwcHg7XG4gIH1cblxuICAucGhvdG9JbmZvOmJlZm9yZSB7XG4gICAgbGVmdDogMTIwcHg7XG4gIH1cblxuICAuY2FySW5mbyB0ZCB7XG4gICAgd2lkdGg6IGF1dG87XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG4ubWFpbi1jb250YWluZXIgcC50aXAge1xuICBtYXJnaW46IDVweDtcbn1cblxuLnNlY3Rpb24ge1xuICBmbGV4OiAwIDEgYXV0bztcbn1cblxuI2dyaWQge1xuICBmbGV4OiAxIDEgYXV0bztcbn1cblxuI2dyaWQyIHtcbiAgaGVpZ2h0OiAxNjdweDtcbiAgbWFyZ2luLXRvcDogNXB4O1xuICB3aWR0aDogNDAwcHg7XG59XG5cbiNncmlkMiAuZ2MtZ3JpZCB7XG4gIGJhY2tncm91bmQ6ICMzMzM7XG4gIGJvcmRlci1jb2xvcjogIzMzMztcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xufVxuXG4uaW5mby1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xufVxuXG4ucGhvdG9JbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBoZWlnaHQ6IDE2NXB4O1xuICBsaW5lLWhlaWdodDogMTY1cHg7XG4gIG1hcmdpbjogMDtcbiAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xuICBwYWRkaW5nOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHdpZHRoOiAyMzBweDtcbn1cblxuLnBob3RvSW5mbzpiZWZvcmUge1xuICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50ICMzMzMgdHJhbnNwYXJlbnQ7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci13aWR0aDogMCAwIDE2NXB4IDUwcHg7XG4gIGNvbnRlbnQ6IFwiIFwiO1xuICBoZWlnaHQ6IDA7XG4gIGxlZnQ6IDE4MHB4O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgd2lkdGg6IDA7XG59XG5cbi5jYXJJbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICBmbGV4OiAxIDEgYXV0bztcbiAgcGFkZGluZzogMC40ZW07XG59XG5cbi5jYXJJbmZvIHRyIHtcbiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xufVxuXG4uY2FySW5mbyB0ZCB7XG4gIGJvcmRlci1ib3R0b206IHNvbGlkIDFweCAjNjY2O1xuICBjb2xvcjogI2ZmZjtcbiAgcGFkZGluZzogMC40ZW07XG4gIGhlaWdodDogMS4yNXJlbTtcbn1cblxuLmNhckluZm8gdGQ6bGFzdC1jaGlsZCB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xuICBwYWRkaW5nLWxlZnQ6IDFlbTtcbn1cblxuQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAjZ3JpZDIge1xuICAgIHdpZHRoOiAzNzVweDtcbiAgfVxuXG4gIC5waG90b0luZm8ge1xuICAgIHdpZHRoOiAxNzBweDtcbiAgfVxuXG4gIC5waG90b0luZm86YmVmb3JlIHtcbiAgICBsZWZ0OiAxMjBweDtcbiAgfVxuXG4gIC5jYXJJbmZvIHRkIHtcbiAgICB3aWR0aDogYXV0bztcbiAgfVxufSJdfQ== */