Question

我想在Elm中呈现我的文档的一部分，但页面的其余部分已经存在。所以我遵循了这里描述的方法：

Elm HTML/JS integration

这里的问题是，必须事先知道元件的高度和宽度。但页面的宽度是动态的，内容的高度会发生变化。

有没有办法至少插入滚动条？

非常感谢

在应用第一个修复后，这是我的最小例子：

http://codepen.io/anon/pen/ghdzl

我甚至可以使用垂直滚动条，但水平滚动条很难看:(

到目前为止，这是我的（最小）代码：

module StandardTexts where

import Window

abstract = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a orci fringilla, rutrum tellus vel, egestas risus. Nunc a sollicitudin orci. Pellentesque congue nec lacus vel fermentum. Sed non nunc ligula. Nulla facilisi. Aenean adipiscing turpis urna, sed pellentesque nulla hendrerit sed. Vestibulum id consectetur urna. Vestibulum congue risus et commodo porttitor. Nullam non lectus sit amet mi varius aliquam quis in dolor. Fusce condimentum blandit interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare vitae urna sed porta. Cras dictum libero nulla, ac ultricies lectus dictum vitae. Nullam nec quam id elit bibendum fringilla sit amet eu lacus. Sed sed dui et dolor rhoncus iaculis. Nam id accumsan orci, id facilisis magna."

abstracts w h =  map (always . width w . plainText <| abstract) [0..9]

display (w, h) = container w h topLeft . flow down <| abstracts w h

main = display <~ Window.dimensions

Answer 1

首先，可能有更好的嵌入方式。有一个视频教程here。

这会给你一个你的榆树元素的div，你可以在你的CSS中设置样式。

  overflow:auto;

会引入滚动条，但您可以设置样式以根据需要调整高度和宽度

Answer 2

我刚才意识到我犯了一个愚蠢的错误。

我使用的是Graphics.Element.container并且有一个高度设置。现在我可以：

将高度设置为自动，这在

删除我明确设置高度的所有调用：

display (w, h) = container w h topLeft . flow down <| abstracts w h

现在是：

display (w, h) = flow down <| abstracts w h

新代码：

module StandardTexts where

import Window

abstract = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a orci fringilla, rutrum tellus vel, egestas risus. Nunc a sollicitudin orci. Pellentesque congue nec lacus vel fermentum. Sed non nunc ligula. Nulla facilisi. Aenean adipiscing turpis urna, sed pellentesque nulla hendrerit sed. Vestibulum id consectetur urna. Vestibulum congue risus et commodo porttitor. Nullam non lectus sit amet mi varius aliquam quis in dolor. Fusce condimentum blandit interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare vitae urna sed porta. Cras dictum libero nulla, ac ultricies lectus dictum vitae. Nullam nec quam id elit bibendum fringilla sit amet eu lacus. Sed sed dui et dolor rhoncus iaculis. Nam id accumsan orci, id facilisis magna."

abstracts w =  map (always . width w . plainText <| abstract) [0..9]

display (w, h) = flow down <| abstracts w

main = display <~ Window.dimensions

示例现在在这里：

http://codepen.io/anon/pen/wJaEi

所以我学到的是，一旦你尝试在榆树中设置一个高度（即使你在css中设置为自动），高度将被修复，你不能再改变它了。

感谢Rachel Gallen的帮助，时间和想法导致了问题的解决（https://stackoverflow.com/a/24520426/1829891）

将Elm-Element嵌入到现有的HTML项目中

2 个答案: