failing to update grid-template-areas css property via java script

Question

I can see the property grid-template-areas inside the style object:

document.getElementById("elem-id").style

i tried setting it via :

js directly

document.getElementById("elem-id").style.gridTemplateAreas = "a a b"

jquery

$("#elem-id").css({"grid-template-areas":"a b c"})

but nothing seems to work, the property remains empty.

FilmFiddler · Accepted Answer · 2017-11-28 03:28:55Z

3

Setting Template Areas like that will require nested quotes. It needs one set of quotes for the overall JavaScript string, and within that, it needs a pair of quotes to denote each set of row cells in the styling.

The actual column and row declarations have not been provided. But anyway one of the following should work, depending on whether you have declared a single row of 3 cells, or 3 rows of 1 cell each:

document.getElementById("elem-id").style.gridTemplateAreas = "'a a b'";

Or:

document.getElementById("elem-id").style.gridTemplateAreas = "'a' 'a' 'b'";

answered Nov 28, 2017 at 3:28

FilmFiddler

5163 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Over a year ago

works great ! i only needed a single row, weird no error message is prompt when invalid format is given

Collectives™ on Stack Overflow

failing to update grid-template-areas css property via java script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related