Though I can't show the web app is there anything that anyone's aware
of that's changed in Chrome that could cause a grid's layout to "fail"?
grid-template-rows: 28px minmax(auto, var(--layout-con-height)) 25px 1fr;
grid-auto-rows: minmax(28px, auto);
On 09/02/2020 09:18, Andrew Poulos wrote:
Though I can't show the web app is there anything that anyone's aware
of that's changed in Chrome that could cause a grid's layout to "fail"?
No I'm not aware of any changes in the latest Chrome that could cause a grid's layout to fail but if you post a snippet of your code and related
CSS here then we can try it out on our machine. Ideally, post a link of
a test page here and there are many free web hosts that can allow you to
do it - Microsoft Azure, Google Cloud and others are the ones to use for
such things but try Github pages first.
With Chrome, the height of the grid item containing the list doesn't
ever get a scroll bar and the grid item containing the iframe is at some
size that doesn't coincide with anything set in the CSS [bad.]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
:root {
--layout-width:640px;
--layout-con-width:662px;
--layout-height:480px;
--layout-con-height:502px;
}
#layout_con {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color: black;
display:grid;
grid-template-columns: 140px 5px minmax(auto, var(--layout-con-width));
grid-template-rows: 28px minmax(auto, var(--layout-con-height)) 25px
1fr;
grid-column-gap: 2px;
grid-row-gap: 2px;
}
#controls {
display:grid;
grid-column: 1;
grid-row: 1 / 5;
background-color: #123984;
}
#current {
color:white;
margin-top:0;
margin-bottom:0;
background-color: darkgray;
overflow-y: auto;
}
#grid_spacer {
grid-column: 2;
grid-row: 1 / 5;
background-color: #980044;
}
#layout_controls {
grid-column: 3;
grid-row: 1;
background-color: #346354;
}
#layout_frame {
background-color: #555555;
grid-column: 3;
grid-row: 2;
overflow: auto;
}
#layout {
border:0;
width: var(--layout-width);
height: var(--layout-height);
}
#layout_title {
grid-column: 3;
grid-row: 3;
background-color: #872287;
}
</style>
</head>
<body>
<div id="layout_con">
<div id="controls">
<ol id="current">
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>z</li>
</ol>
</div>
<div id="grid_spacer"> </div>
<div id="layout_controls">controls</div>
<div id="layout_frame">
<iframe id="layout" src="https://news.ycombinator.com/"></iframe>
</div>
<div id="layout_title">title</div>
</div>
</html>
On 10/02/2020 2:52 pm, Andrew Poulos wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
:root {
--layout-width:640px;
--layout-con-width:662px;
--layout-height:480px;
--layout-con-height:502px;
}
#layout_con {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color: black;
display:grid;
grid-template-columns: 140px 5px minmax(auto,
var(--layout-con-width));
grid-template-rows: 28px
minmax(auto, var(--layout-con-height)) 25px 1fr;
grid-column-gap: 2px;
grid-row-gap: 2px;
}
#controls {
display:grid;
grid-column: 1;
grid-row: 1 / 5;
background-color: #123984;
}
#current {
color:white;
margin-top:0;
margin-bottom:0;
background-color: darkgray;
overflow-y: auto;
}
#grid_spacer {
grid-column: 2;
grid-row: 1 / 5;
background-color: #980044;
}
#layout_controls {
grid-column: 3;
grid-row: 1;
background-color: #346354;
}
#layout_frame {
background-color: #555555;
grid-column: 3;
grid-row: 2;
overflow: auto;
}
#layout {
border:0;
width: var(--layout-width);
height: var(--layout-height);
}
#layout_title {
grid-column: 3;
grid-row: 3;
background-color: #872287;
}
</style>
On 10/02/2020 2:52 pm, Andrew Poulos wrote:
With Chrome, the height of the grid item containing the list doesn't
ever get a scroll bar and the grid item containing the iframe is at some
size that doesn't coincide with anything set in the CSS [bad.]
Firefox 73.0b12 64-bit and Opera 66.0.3515.72 64-bit (on Windows 10)
both "work" as expected. Whereas Microsoft Edge 80.0.361.48 64-bit and
Google Chrome 80.0.3987.87 64-bit both "fail" - though they both did
work up until about a week ago.
Andrew Poulos
In-Reply-To: <lq-dnd2Ylp-HSt3DnZ2dnUU7-fHNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:
On 10/02/2020 2:52 pm, Andrew Poulos wrote:
[snip]
https://codepen.io/noneyainvalid/full/VwLLPow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
:root {
--layout-width:640px;
I see no reason for --layout-width … take care of that later.
--layout-con-width:662px;
--layout-height:480px;
I see no reason for --layout-height … take care of that later.
--layout-con-height:502px;
--layout-con-height: calc(100vh - (28px + 25px + (2px * 2)));
The above sets the height of the second row, 28px for the first row,
25px for the third row, 2px * 2 for the row gap, balance for the
second row.
}
#layout_con {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
Remove position,left,top,width,height
background-color: black;
display:grid;
grid-template-columns: 140px 5px minmax(auto,
var(--layout-con-width));
grid-template-rows: 28px
minmax(auto, var(--layout-con-height)) 25px 1fr;
Only 3 rows remove 1fr, I see no need for minmax … just replace it
with var(--layout-con-height)
grid-template-rows: 28px var(--layout-con-height) 25px;
sets the height of the grid.
grid-column-gap: 2px;
grid-row-gap: 2px;
}
#controls {
display:grid;
grid-column: 1;
grid-row: 1 / 5;
only 3 rows grid-row: 1 / 4;
background-color: #123984;
}
#current {
color:white;
margin-top:0;
margin-bottom:0;
background-color: darkgray;
overflow-y: auto;
}
#grid_spacer {
grid-column: 2;
grid-row: 1 / 5;
only 3 rows grid-row: 1 / 4;
background-color: #980044;
}
#layout_controls {
grid-column: 3;
grid-row: 1;
background-color: #346354;
}
#layout_frame {
background-color: #555555;
grid-column: 3;
grid-row: 2;
overflow: auto;
overflow:hidden;
iframe can produce its own scroll bars when needed.
}
#layout {
border:0;
width: var(--layout-width);
height: var(--layout-height);
width:100%;
height:100%;
}
#layout_title {
grid-column: 3;
grid-row: 3;
background-color: #872287;
}
</style>
On Mon, 10 Feb 2020 15:07:52 +1100, Andrew Poulos <ap_prog@hotmail.com>
wrote in <lq-dnd2Ylp-HSt3DnZ2dnUU7-fHNnZ2d@westnet.com.au>:
On 10/02/2020 2:52 pm, Andrew Poulos wrote:
With Chrome, the height of the grid item containing the list doesn't
ever get a scroll bar and the grid item containing the iframe is at some >>> size that doesn't coincide with anything set in the CSS [bad.]
Firefox 73.0b12 64-bit and Opera 66.0.3515.72 64-bit (on Windows 10)
both "work" as expected. Whereas Microsoft Edge 80.0.361.48 64-bit and
Google Chrome 80.0.3987.87 64-bit both "fail" - though they both did
work up until about a week ago.
Andrew Poulos
I tried it with FF, IE, Edge, Opera and Chrome. They all work the same adding scroll bars as needed as you wanted.
None of them loaded the ifram however. Here is Chrome's error message:
Refused to display 'https://news.ycombinator.com/' in a frame because it
set 'X-Frame-Options' to 'deny'.
Both FF and display one of my own local pages in the iframe properly with scroll bars as needed.
HTH
I've been working on an internal company web app for at least a year.
The app uses nested grids.
It's been working fine on all the devices and browsers we've tested
until two days ago when we updated to the latest Chrome on Windows
(version 80.0.3987.87 64-bit). Now a nested grid ignores the sizes set
for the items it contains.
On 2020-02-09 2:18 AM, Andrew Poulos wrote:
I've been working on an internal company web app for at least a year.Have you tried a different user profile?
The app uses nested grids.
It's been working fine on all the devices and browsers we've tested
until two days ago when we updated to the latest Chrome on Windows
(version 80.0.3987.87 64-bit). Now a nested grid ignores the sizes set
for the items it contains.
On 12/02/2020 7:49 am, James Moe wrote:
On 2020-02-09 2:18 AM, Andrew Poulos wrote:
I've been working on an internal company web app for at least a year.Have you tried a different user profile?
The app uses nested grids.
It's been working fine on all the devices and browsers we've tested
until two days ago when we updated to the latest Chrome on Windows
(version 80.0.3987.87 64-bit). Now a nested grid ignores the sizes set
for the items it contains.
No, but I tested on another computer and it worked!
When I checked the version of Chrome installed on the other computer it
was version 79. After I updated it to version 80 the layout fails.
Given that it's worked for a year on Chrome and that it still works with Firefox and Opera my guess now is that Google "broke" something.
HTH
Yes it did. I went onto a different computer and it seems to work fine.
Now I'm stumped as to why my computer behaves differently.
| Sysop: | Keyop |
|---|---|
| Location: | Huddersfield, West Yorkshire, UK |
| Users: | 296 |
| Nodes: | 16 (2 / 14) |
| Uptime: | 87:36:59 |
| Calls: | 6,658 |
| Files: | 12,203 |
| Messages: | 5,333,881 |