Skip to content

Commit

Permalink
Use '__has-no-content' class name to display placeholder text
Browse files Browse the repository at this point in the history
This causes the placeholder to appear even when the editor div is not
wholly devoid of elements.

Possible BREAKING CHANGE: The placeholder text is now absolutely
positioned (at `top: 0`) of the editor div. If a user has applied their
own padding to the editor div the placeholder may not show up in the
correct location. The solution is to add a CSS rule that overrides the
`top` to match the value of the `padding-top`:
```
.__mobiledoc-editor.__has-no-content:after {
  top: <value of padding-top>;
}
```

Also: The editor now has a `min-height: 1em;`
to ensure that the placeholder has a space in which to be displayed.

Fixes #407 #171
  • Loading branch information
bantic committed Aug 25, 2016
1 parent 919600c commit 764347c
Showing 1 changed file with 10 additions and 11 deletions.
21 changes: 10 additions & 11 deletions src/css/editor.less
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,23 @@
font-family: 'Lora', Georgia, serif;
margin: 1em 0;
color: #454545;
/*
Chrome bug adds inline styles when backspacing to join 2 blocks.
Fix: Apply font styles to parent element, or use % for font-size, line-height.
http://stackoverflow.com/questions/15015019/prevent-chrome-from-wrapping-contents-of-joined-p-with-a-span
*/
font-size: 120%;
line-height: 160%;
font-size: 1.2em;
line-height: 1.6em;
position: relative;
min-height: 1em;
}
.__mobiledoc-editor:focus {
outline: none;
}
.__mobiledoc-editor:empty:before {
.__mobiledoc-editor > * {
position: relative;
}
.__mobiledoc-editor.__has-no-content:after {
content: attr(data-placeholder);
color: #bbb;
cursor: text;
}
.__mobiledoc-editor > * {
position: relative;
position: absolute;
top: 0;
}
.__mobiledoc-editor a {
color: @themeColorText;
Expand Down

0 comments on commit 764347c

Please sign in to comment.