Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37151

Re: grid template rows

Show all headers | View raw

Andrew Poulos wrote:

> With this HTML
> 
> <div id="container" style="grid-template-rows: 63px 42px 1fr 32px;">
> 
> console.log(container.style.gridTemplateRows);
> 
> gives "64px 32px 1fr 32px;"

Probably not.  The delimiting semicolon is not supposed to be part of the 
property value.
 
> But with this
> 
> #container {
>    grid-template-rows: 64px 32px 1fr 32px;
> }
> 
> <div id="container">
> 
> let con = document.getElementById('container');
> console.log( window.getComputedStyle(con,
> null).getPropertyValue("grid-template-rows") );
> 
> gives "64px 32px 497px 32px;"

Probably not.  Same reason as above.
 
> That is, the third value is a pixel value instead of 1fr.

I cannot reproduce that in navigator.userAgent === "Mozilla/5.0 (X11; Linux 
x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 
Safari/537.36".
 
> How can I get the actual value as set in the CSS and not the pixel values?

The only other way I know that might work in your case is to read the 
stylesheet directly.
 
> I need to manipulate the value for grid-template-rows and the moment I
> get the value, any fr unit is lost and the layout breaks.

You can store the current “fr” value elsewhere.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

grid template rows Andrew Poulos <ap_prog@hotmail.com> - 2019-08-19 12:52 +1000
  Re: grid template rows Arno Welzel <usenet@arnowelzel.de> - 2019-08-19 12:24 +0200
  Re: grid template rows Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-08-19 15:19 +0200

csiph-web