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

Groups > comp.lang.javascript > #37150

Re: grid template rows

Show all headers | 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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next 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