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

Groups > comp.lang.javascript > #37149 > unrolled thread

grid template rows

Back to article view | Back to comp.lang.javascript

Contents

  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

#37149 — grid template rows

With this HTML

<div id="container" style="grid-template-rows: 63px 42px 1fr 32px;">

console.log(container.style.gridTemplateRows);

gives "64px 32px 1fr 32px;"

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.

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

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.

Andrew Poulos

[toc] | [next] | [standalone]

#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

[toc] | [prev] | [next] | [standalone]

#37151

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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web