{"id":49,"date":"2018-04-25T12:27:49","date_gmt":"2018-04-25T12:27:49","guid":{"rendered":"http:\/\/www.bullcrane.com\/angular\/?p=49"},"modified":"2018-04-25T12:27:49","modified_gmt":"2018-04-25T12:27:49","slug":"problem-with-heightcalc","status":"publish","type":"post","link":"http:\/\/www.bullcrane.com\/angular\/2018\/04\/25\/problem-with-heightcalc\/","title":{"rendered":"Problem with height:calc"},"content":{"rendered":"<p>I&#8217;ve been setting the height of one of my div tags using the <em>calc<\/em> construct.\u00a0 Here is a simplified example:<\/p>\n<pre>&lt;div style=\"height:calc(100%-230px); overflow:auto\"&gt;\r\nmy div stuff\r\n&lt;\/div&gt;<\/pre>\n<p>This keeps my div on the screen and when the div gets big enough (<em>my div stuff<\/em> is replaced with a ton of stuff) it sprouts\u00a0 its own scrollbar instead of the scrollbar for the whole window appearing.<\/p>\n<p>After upgrading from Angular 5.0 to 5.2, this stopped working.\u00a0 It was as if my specification for height simply was not there.\u00a0 The window scrollbar would appear and my whole app would scroll.<\/p>\n<p>I found a work-around.\u00a0 Specify the percent instead as a vh (viewport height):<\/p>\n<pre>&lt;div style=\"height:calc(100vh-230px); overflow:auto\"&gt;\r\nmy div stuff\r\n&lt;\/div&gt;<\/pre>\n<p>When I upgraded Angular, I also obtained the latest flex-layout and angular-material.\u00a0 It could be that this problem is from one of these libraries, instead of Angular 5.2 itself.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been setting the height of one of my div tags using the calc construct.\u00a0 Here is a simplified example: &lt;div style=&#8221;height:calc(100%-230px); overflow:auto&#8221;&gt; my div stuff &lt;\/div&gt; This keeps my div on the screen and when the div gets big enough (my div stuff is replaced with a ton of stuff) it sprouts\u00a0 its own &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.bullcrane.com\/angular\/2018\/04\/25\/problem-with-heightcalc\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Problem with height:calc&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/49"}],"collection":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":1,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":50,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/49\/revisions\/50"}],"wp:attachment":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}