CODEWITHSUNDEEP
htmlcss
Higgor Valença
Higgor Valença

Reputation: 33

How do I make a contenteditable='false' div have the same height as a contenteditable='true'?

I have a div that's been used as an "input" by using contenteditable, and it works great when it is enabled. But there's one scenario where I need to disable the "input" by setting contenteditable='false', which makes the div lose its height (as you can see in this JSFiddle).

<div contenteditable="true" class="visible-borders"></div>
<div contenteditable="false" class="visible-borders"></div>

Do you guys have any solution to that? I wanted something that didn't involve min-height. And no, I cannot change the code to use something other than contenteditable. I'm using someone else's code.

Upvotes: 1

Views: 1238

Answers (4)

Moob
Moob

Reputation: 16184

This is because your contenteditable=false div has no content and nothing holding it open, whereas the content-editable element has default styling that shows its editable (specifically: -webkit-user-modify: read-write)

You could simply give the .visible-borders a min-height. If (for some unspecified reason) you don't want to use min-height, you could insert some pseudo content:

.visible-borders:before {
    content: "\00a0"
}

https://jsfiddle.net/a5c7fo9c/6/

Upvotes: 4

Paul Roub
Paul Roub

Reputation: 36438

You can include "empty" (zero-width, invisible) pseudo-content in the contenteditable=false version:

.visible-borders {
  border: 1px solid black;
}

.visible-borders[contenteditable=false]:after {
  content: "\200B";   /* zero-width space */
}
<div contenteditable="true" class="visible-borders"></div>
<br />
<div contenteditable="false" class="visible-borders"></div>

Upvotes: 2

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can use pseudo elements

CSS

.visible-borders {
    border: solid 1px black;
    display:block;

}
.visible-borders:after {
    content:"\00a0";
}

DEMO HERE

Upvotes: 5

Noctisdark
Noctisdark

Reputation: 348

the contenteditable attribute leaves a space for the text to be written, if you want the to be equal pick any height larger than the space required to write a line of text, and there is not need for contenteditable=false because it's the default in html when it's not specified !

Upvotes: 0

Related Questions