CODEWITHSUNDEEP
twitter-bootstrapember.js
thodwris
thodwris

Reputation: 1377

How do you integrate a simple HTML theme with Google Maps in Ember?

I have some code from a person's Bootply and I have integrated the code into ember, but it's not playing as I want and as the theme plays. The scrollbar in ember is the right side and not on the left div as the example.

I have a Brocfile.js document:

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();

// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.


app.import('vendor/css/bootstrap.min.css');
app.import('vendor/css/styles.css');
app.import('vendor/js/bootstrap.min.js');
app.import('vendor/js/scripts.js');

module.exports = app.toTree();

And I have index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TestMap</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for 'head'}}

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/test-map.css">

    {{content-for 'head-footer'}}
  </head>
  <body>
    {{content-for 'body'}}

    <script src="assets/vendor.js"></script>
    <script src="assets/test-map.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>

    {{content-for 'body-footer'}}
  </body>
</html>

Any suggestions about this? I'll also attach you some screenshots: enter image description here

enter image description here

Upvotes: 2

Views: 114

Answers (1)

Patsy Issa
Patsy Issa

Reputation: 11293

Ember wraps your application in a div. The problem here is that we can't add a class to that div without resorting to the deprecated Ember.View.

For the time being you can fix this by using the direct child selector on the body:

body > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

This will remove the right scrollbar.

Upvotes: 1

Related Questions