Path: csiph.com!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From: Arno Welzel <usenet@arnowelzel.de>
Newsgroups: comp.lang.javascript
Subject: Re: grid template rows
Date: Mon, 19 Aug 2019 12:24:44 +0200
Lines: 56
Message-ID: <grvbndFo2biU1@mid.individual.net>
References: <Wt6dnaJkUdZ1k8fAnZ2dnUU7-TfNnZ2d@westnet.com.au>
Mime-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
X-Trace: individual.net nsk98a7JuJUU1iQlxnCcbADA8DbChWErTlqXS1Oao8lC5H2Kcv
Cancel-Lock: sha1:KeuHOYkqsY3CaNAcWUz82NcmWAQ=
In-Reply-To: <Wt6dnaJkUdZ1k8fAnZ2dnUU7-TfNnZ2d@westnet.com.au>
Content-Language: en-US
Xref: csiph.com comp.lang.javascript:37150

On 19.08.19 04:52, 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;"

Yes, this is the literal style attribute of the element.

> 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;"
> 
> That is, the third value is a pixel value instead of 1fr.

Since you use window.getComputedStyle() you will get the *computed*
style and not the CSS rule behind it. "1fr" is *not* an absolute size,
it is a "fraction" which has to be computed to an actual value before
the browser can display the element.

> How can I get the actual value as set in the CSS and not the pixel values?

You can't.

If you need to get the CSS rule itself, you have to iterate through the
rules until you find the one which maches the assigned class property.

Also see
<https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript>.

> 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.

If you set the values anyway - why don't you do the calculation for the
"1fr" column as well?

Also see
<https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout>.


-- 
Arno Welzel
https://arnowelzel.de