CODEWITHSUNDEEP
ruby-on-railscoffeescriptinfowindowgmaps4rails
ekremkaraca
ekremkaraca

Reputation: 1449

unable to set z-index, overflow-y, etc. in coffeescript

In my Rails app, I was trying to customize infobox for Gmaps assisting with gmaps4rails gem. While I was defining some css attributes like z-index, overflow-y to customize it, I've faced error like below:

ExecJS::RuntimeError at /
SyntaxError: [stdin]:22:15: unexpected -
  (in ../app/assets/javascripts/infobox.js.coffee)

Here's the file seems to be responsible for the error:

../app/assets/javascripts/infobox.js.coffee:

# omitted
infobox: (boxText)->
  content: boxText
  pixelOffset: new google.maps.Size(-70, -110)
  boxStyle: {
    background: '#fefefe',
    width: '250px',
    height: '80px',
    border: "1px solid black",
    padding: "5px 10px",
    overflow-y: "hidden",
    z-index: 54
  }

How can I define these attributes for infobox?

Upvotes: 1

Views: 388

Answers (2)

MrYoshiji
MrYoshiji

Reputation: 54882

Using quotes makes it work: Coffescript to Javascript permalink

The final code for you would be:

infobox: (boxText)->
  content: boxText
  pixelOffset: new google.maps.Size(-70, -110)
  boxStyle: {
    background: '#fefefe',
    width: '250px',
    height: '80px',
    border: "1px solid black",
    padding: "5px 10px",
    "overflow-y": "hidden",
    "z-index": 54
  }

Upvotes: 1

Alex P
Alex P

Reputation: 6072

This problem comes from JavaScript, and the CoffeeScript project doesn't want to fiddle with it (justifiably, as it introduces some consistency problems). In JavaScript you can't use dashes in property names unless they're in strings; As MrYoshiji says, quoting them will make your JS work fine: 

infobox: (boxText)->
  content: boxText
  pixelOffset: new google.maps.Size(-70, -110)
  boxStyle: {
    background: '#fefefe',
    width: '250px',
    height: '80px',
    border: "1px solid black",
    padding: "5px 10px",
    'overflow-y': "hidden",
    "z-index": 54
  }

You should be able to use either quote style without problems.

Upvotes: 1

Related Questions