Re: grid template rows

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> (permalink)
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

Show key headers only | View raw

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

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