Skip to content

Add note about proper setting of sizes to Wodo.TextEditor How-to FAQ #715

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add note about proper setting of sizes to Wodo.TextEditor How-to FAQ #715

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion programs/editor/HOWTO-wodotexteditor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ The file which needs to be included to create a Wodo.TextEditor is "wodotextedit
<!-- ... -->
</head>

In the body of the HTML there needs to be set a div element which should hold the editor, with a unique id value and a size as wanted.
In the body of the HTML there needs to be set a <div> element which should hold the editor, with a unique id value and a size as wanted.

<body>
<!-- ... -->
Expand Down Expand Up @@ -124,3 +124,22 @@ So it will be listed in "fonts.css" as
1. Why is a document which is hosted on another server not loading?

Web pages with the Wodo.TextEditor must be served with the flag to allow its code to access code from servers in other domains. See https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

2. Why is there just a blank screen?

Wodo.TextEditor does not enforce a size on the <div> element which is containing it. So make sure you have set a size on it.
Copy link
Member

@adityab adityab Jul 14, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should have a default size (even 200x200 is fine) set on the <div> to minimize developer confusion. Once I can see where the element is and how it looks like, I can adapt the size myself using the instructions below.

Copy link
Contributor Author

@kossebau kossebau Aug 8, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So you mean see if editorDiv.style.height and style.width is not set on creation, then set something as default? Hm...

Copy link
Member

@adityab adityab Aug 18, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're understandably uncomfortable about that - note that there is a precedent for such things in HTML5, for example a textarea has a default width and height as well.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

Copy link
Contributor Author

@kossebau kossebau Sep 23, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm. textarea has the advantage that the browser can simply calculate the pixel size derived from the default size given in columns and lines... whereas we here would have to do some more complicated calculation of a sensible size in pixels from things like what elements are on the toolbar and what page size the document might have.
IMHO an automatic default size should be something sensible, delivering a setup that is useful. Otherwise it makes a bad impression. Some randomly set default size just to help people seeing the element is not a good enough reason I think. Because then some people might rely on the default size, and if we change it in the future, things will break for them and they will be unhappy.
So until we have code to calculate sensible default sizes (and thus also a sensible minimal size) I don't think we should have a default size.


If that <div> element is the only element in the webpage and you are setting the size relatively (in "%"), make sure that at least one of the <html> element and the <body> element
have an absolute size set, or both a relative size.

If you want the editor to be full-window, you would set the size on all the <html> element, the <body> element and
the <div> element to be "width: 100%" and "height: 100%", e.g. like this:

```html
<html style="width:100%; height:100%; margin:0px; padding:0px">
<!-- ... -->
<body style="width:100%; height:100%; margin:0px; padding:0px">
<div id="editorContainer" style="width:100%; height:100%; margin:0px; padding:0px"></div>
</body>
</html>
```