2

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

Elm HTML/JS 集成

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

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

非常感谢

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

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
4

2 回答 2

3

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

这为您提供了一个围绕您的 elm 元素的 div，您可以在您的 css 中设置它的样式。

  overflow:auto;

将引入滚动条，但您可以根据需要调整高度和宽度

于 2014-07-01T22:58:55.107 回答
0

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

我正在使用 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

所以我学到的是，一旦您尝试在 elm 中设置高度（即使您在 css 中将其设置为自动），高度将被固定并且您无法再更改它。

感谢 Rachel Gallen 为解决问题提供的帮助、时间和想法（https://stackoverflow.com/a/24520426/1829891）

于 2014-07-04T11:45:33.957 回答