{"action":"created","issue":{"url":"https://api.github.com/repos/bokeh/bokeh/issues/7978","repository_url":"https://api.github.com/repos/bokeh/bokeh","labels_url":"https://api.github.com/repos/bokeh/bokeh/issues/7978/labels{/name}","comments_url":"https://api.github.com/repos/bokeh/bokeh/issues/7978/comments","events_url":"https://api.github.com/repos/bokeh/bokeh/issues/7978/events","html_url":"https://github.com/bokeh/bokeh/issues/7978","id":330701088,"node_id":"MDU6SXNzdWUzMzA3MDEwODg=","number":7978,"title":"sizing mode scale_both grows on window resize","user":{"login":"Karel-van-de-Plassche","id":6404167,"node_id":"MDQ6VXNlcjY0MDQxNjc=","avatar_url":"https://avatars1.githubusercontent.com/u/6404167?v=4","gravatar_id":"","url":"https://api.github.com/users/Karel-van-de-Plassche","html_url":"https://github.com/Karel-van-de-Plassche","followers_url":"https://api.github.com/users/Karel-van-de-Plassche/followers","following_url":"https://api.github.com/users/Karel-van-de-Plassche/following{/other_user}","gists_url":"https://api.github.com/users/Karel-van-de-Plassche/gists{/gist_id}","starred_url":"https://api.github.com/users/Karel-van-de-Plassche/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Karel-van-de-Plassche/subscriptions","organizations_url":"https://api.github.com/users/Karel-van-de-Plassche/orgs","repos_url":"https://api.github.com/users/Karel-van-de-Plassche/repos","events_url":"https://api.github.com/users/Karel-van-de-Plassche/events{/privacy}","received_events_url":"https://api.github.com/users/Karel-van-de-Plassche/received_events","type":"User","site_admin":false},"labels":[{"id":165234083,"node_id":"MDU6TGFiZWwxNjUyMzQwODM=","url":"https://api.github.com/repos/bokeh/bokeh/labels/tag:%20component:%20bokehjs","name":"tag: component: bokehjs","color":"D0CBB8","default":false},{"id":289583070,"node_id":"MDU6TGFiZWwyODk1ODMwNzA=","url":"https://api.github.com/repos/bokeh/bokeh/labels/tag:%20layout","name":"tag: layout","color":"D0CBB8","default":false},{"id":2031795,"node_id":"MDU6TGFiZWwyMDMxNzk1","url":"https://api.github.com/repos/bokeh/bokeh/labels/type:%20bug","name":"type: bug","color":"C02942","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/bokeh/bokeh/milestones/42","html_url":"https://github.com/bokeh/bokeh/milestone/42","labels_url":"https://api.github.com/repos/bokeh/bokeh/milestones/42/labels","id":3343865,"node_id":"MDk6TWlsZXN0b25lMzM0Mzg2NQ==","number":42,"title":"0.13.0","description":"","creator":{"login":"mattpap","id":27475,"node_id":"MDQ6VXNlcjI3NDc1","avatar_url":"https://avatars2.githubusercontent.com/u/27475?v=4","gravatar_id":"","url":"https://api.github.com/users/mattpap","html_url":"https://github.com/mattpap","followers_url":"https://api.github.com/users/mattpap/followers","following_url":"https://api.github.com/users/mattpap/following{/other_user}","gists_url":"https://api.github.com/users/mattpap/gists{/gist_id}","starred_url":"https://api.github.com/users/mattpap/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattpap/subscriptions","organizations_url":"https://api.github.com/users/mattpap/orgs","repos_url":"https://api.github.com/users/mattpap/repos","events_url":"https://api.github.com/users/mattpap/events{/privacy}","received_events_url":"https://api.github.com/users/mattpap/received_events","type":"User","site_admin":false},"open_issues":1,"closed_issues":36,"state":"open","created_at":"2018-05-14T10:17:14Z","updated_at":"2018-06-11T16:36:54Z","due_on":null,"closed_at":null},"comments":20,"created_at":"2018-06-08T15:20:57Z","updated_at":"2018-06-11T16:45:43Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"I'm building a layout with nested rows and columns using the new HTML template feature and bootstrap/flexbox. I would expect that the bokeh plots would just fill the available space. However, the plots start small and grow on every window resize, even though the bootstrap columns/rows resize correctly.\r\n![ezgif com-gif-maker](https://user-images.githubusercontent.com/6404167/41166331-4511f604-6b40-11e8-9edf-4835dd7a4a23.gif)\r\n\r\n\r\n``` python\r\nfrom IPython import embed\r\nfrom bokeh.layouts import row, column, layout, gridplot, Spacer, widgetbox\r\nfrom bokeh.io import curdoc\r\nfrom bokeh.models.widgets import Slider\r\nfrom bokeh.plotting import figure\r\nfrom bokeh.embed import components\r\n\r\nsize = 500⋅\r\nfigs = []\r\nsizing_mode = 'scale_both'\r\nfor ii in range(4):\r\n    fig = figure(plot_width=int(size), plot_height=int(size), name='freq' + str(ii), sizing_mode=sizing_mode)\r\n    fig.circle(0, 0, radius=1, fill_color=\"green\")\r\n    figs.append(fig)\r\nfor ii in range(3):\r\n    fig = figure(plot_width=int(size), plot_height=int(size), name='flux' + str(ii), sizing_mode=sizing_mode, tags=['fluxlike'])\r\n    fig.circle(0, 0, radius=1, fill_color=\"red\")\r\n    figs.append(fig)\r\n\r\nsliders = []\r\nfor ii in range(9):\r\n    sliders.append(Slider(start=0, end=5))\r\n\r\nslidercol1 = column(widgetbox(*sliders[:5], height=20, width=size, sizing_mode='scale_width'), name='sliders1')\r\nslidercol2 = column(widgetbox(*sliders[5:], height=20, width=size, sizing_mode='scale_width'), name='sliders2')\r\nsliderrow = row(slidercol1, slidercol2, sizing_mode='scale_width')\r\n\r\nfor fig in figs:\r\n    curdoc().add_root(fig)\r\n\r\ncurdoc().add_root(slidercol1)\r\ncurdoc().add_root(slidercol2)\r\n```\r\n\r\n``` jinja2\r\n{% extends base %}\r\n{% block preamble %}\r\n<script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"></script>\r\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js\" integrity=\"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49\" crossorigin=\"anonymous\"></script>\r\n<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\" integrity=\"sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB\" crossorigin=\"anonymous\">\r\n<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js\" integrity=\"sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T\" crossorigin=\"anonymous\"></script>\r\n<style>\r\n.p0 { background-color: red; }\r\n.p1 { background-color: green; }\r\n.s0 { background-color: green; }\r\n.s1 { background-color: blue; }\r\n\r\n.container-fluid {\r\n  flex-wrap: nowrap;\r\n  height: 50vh;\r\n}\r\n\r\n.col {\r\n  flex-wrap: nowrap;\r\n  flex-basis: auto;\r\n  flex-shrink: 1;\r\n  border: 2px solid red;\r\n  margin: 1px;\r\n  min-width: 0;\r\n}\r\n\r\n.square:before {\r\n  content:'';\r\n  float:left;\r\n  padding-top:100%;\r\n}\r\n\r\n.row {\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n.bigrow {\r\n  display:flex;\r\n}\r\n</style>\r\n\r\n{% endblock %}\r\n{% block contents %}\r\n  <div class=\"container-fluid\">\r\n    <div class=\"bigrow\">\r\n\r\n      {% for root in roots %}\r\n        {% if \"fluxlike\" in root.tags %}\r\n          <div class=\"col square\">\r\n            {{ embed(root) }}\r\n          </div>\r\n        {% endif %}\r\n      {% endfor %}\r\n\r\n      <div class=\"col square\">\r\n        <div class=\"row\">\r\n          <div class=\"col square\">\r\n            {{ embed(roots.freq0) }}\r\n          </div>\r\n          <div class=\"col square\">\r\n            {{ embed(roots.freq1) }}\r\n          </div>\r\n        </div> {# row #}\r\n        <div class=\"row\">\r\n          <div class=\"col square\">\r\n            {{ embed(roots.freq2) }}\r\n          </div>\r\n          <div class=\"col square\">\r\n            {{ embed(roots.freq3) }}\r\n          </div>\r\n        </div> {# row #}\r\n      </div> {# col square #}\r\n    </div> {# bigrow #}\r\n\r\n\r\n    <div class=\"bigrow\">\r\n      <div class=\"col\">\r\n        {{ embed(roots.sliders1) }}\r\n      </div>\r\n      <div class=\"col\">\r\n        {{ embed(roots.sliders2) }}\r\n      </div>\r\n    </div> {# bigrow #}\r\n  </div> {# container-fluid #}\r\n{% endblock %}\r\n```\r\n\r\nPython version      :  3.6.5 | packaged by conda-forge | (default, Apr  6 2018, 13:39:56) \r\nIPython version     :  6.3.1\r\nBokeh version       :  0.13.0dev8-dirty\r\nBokehJS static path :  /home/karel/working/bokeh/bokeh/server/static\r\nnode.js version     :  v8.10.0\r\nnpm version         :  6.1.0"},"comment":{"url":"https://api.github.com/repos/bokeh/bokeh/issues/comments/396308695","html_url":"https://github.com/bokeh/bokeh/issues/7978#issuecomment-396308695","issue_url":"https://api.github.com/repos/bokeh/bokeh/issues/7978","id":396308695,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NjMwODY5NQ==","user":{"login":"mattpap","id":27475,"node_id":"MDQ6VXNlcjI3NDc1","avatar_url":"https://avatars2.githubusercontent.com/u/27475?v=4","gravatar_id":"","url":"https://api.github.com/users/mattpap","html_url":"https://github.com/mattpap","followers_url":"https://api.github.com/users/mattpap/followers","following_url":"https://api.github.com/users/mattpap/following{/other_user}","gists_url":"https://api.github.com/users/mattpap/gists{/gist_id}","starred_url":"https://api.github.com/users/mattpap/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattpap/subscriptions","organizations_url":"https://api.github.com/users/mattpap/orgs","repos_url":"https://api.github.com/users/mattpap/repos","events_url":"https://api.github.com/users/mattpap/events{/privacy}","received_events_url":"https://api.github.com/users/mattpap/received_events","type":"User","site_admin":false},"created_at":"2018-06-11T16:45:43Z","updated_at":"2018-06-11T16:45:43Z","author_association":"CONTRIBUTOR","body":"If I have to guess when it was broken again, I'm pretty sure it was when I removed the requirement for setting `width` and `height` of certain DOM elements in every template."}}
{"actor":{"display_login":"mattpap"}}