Is there a way to ensure that a contenteditable='false' div matches the height of a contenteditable='true' div?

My dilemma involves a div that functions as an "input" using the contenteditable attribute. It works perfectly when enabled, but I face an issue when I need to disable this "input" by setting contenteditable='false'. This change causes the div to lose its height, which you can see in this JSFiddle.

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

I am seeking a solution to this problem. Ideally, I would like a fix that does not involve using min-height. Unfortunately, switching away from contenteditable is not an option as I am working within someone else's codebase.

htmlcss

Answer №1

Utilize pseudo elements for creating visible borders

CSS Styles

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

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

SEE IT IN ACTION HERE

Answer №2

The reason behind this issue is that the contenteditable=false div lacks content, causing it to collapse with nothing keeping it visible. On the other hand, the content-editable element comes with default styling indicating its editability (specifically: -webkit-user-modify: read-write)

To resolve this, you can simply assign a min-height to the .visible-borders class. If, for any undisclosed reasons, you prefer not to use min-height, adding some pseudo content can also work:

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

Check out this demo on https://jsfiddle.net/a5c7fo9c/6/

Answer №3

If you want to add invisible pseudo-content in the contenteditable=false option, you can use the following code snippet:

.hidden-content {
  display: none;
}

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

Answer №4

When using the contenteditable attribute, ensure there is enough space for text input by setting the height to accommodate at least one line of text. There is no need to specify contenteditable=false as it is the default in HTML when not specified!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure images are aligned horizontally with their captions positioned underneath

I need help with aligning two images horizontally with text below each image. This is the code I have so far: HTML <div class="selectGame"> <div id="computerIcon" class = "icon"> <img src="http://lorempixel.com" > <span cla ...

htmlcss

Issue with jQuery dropdown navigation bar

I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle). HTML: <ul id="mainmenu"> <li><a href="http://myszki/">Aktualności</a></li> <li class="parent item13"><a href=" ...

jquerycss

Is there a way to showcase an HTML body in the Gmail app on iOS?

I am facing a challenge while trying to incorporate HTML formatting in the body of an email shared through Gmail using UIActivityViewController on iOS. Despite my efforts, the Gmail application fails to render the HTML content properly and only displays pl ...

htmliosobjective-cgmailuiactivityviewcontroller

Using JavaScript variables within an HTML tag

I am attempting to embed a JS variable into HTML tags, but for some reason the movie is not loading. Here is the code I am using: var filmLocation = "images/main.swf"; <script>document.write('<PARAM name="movie" value="' + filmLocat ...

javascripthtml

Impact items without the need to individually assign a class to each item

Apologies if this question has already been answered elsewhere...I have been unable to find the solution, perhaps due to my lack of knowledge on how to phrase it. I am attempting to modify list items by setting a class for the ul, eliminating the need to ...

htmlcsshtml-lists

When the browser size shrinks, turn off the drop-down navigation menu

I'm currently working on a responsive website, and I have encountered an issue with a dropdown menu. When the browser size is reduced to 900px, the menu shifts all the way to the left side. To address this, I added some left padding to keep it off the ...

htmlcssdrop-down-menuresponsive-designnav

Retrieve the values of multiple elements at once and utilize them individually

My goal is to extract the values of the first 5 elements with the same class separately and concurrently. For example, if the input contains: <span><div class="amount large">100</div></span> <span><div class="amount large" ...

jqueryhtmlcountelementjscript

Guide to making an `Ajax Login` button

I am interested in creating a SIGN IN button using ajax. Specifically, I want it to display something (such as welcome) on the same page without refreshing it. This is the progress I have made so far: update2: <form id="myForm" onsubmit="return signi ...

javascripthtmlajax

CSS code for creating a triangle underneath a menu item

Given that my client has presented me with a site design featuring a standard menu containing a downward triangle on the active item, I am feeling clueless about how to proceed. What would be the most effective approach for achieving this effect? https:// ...

cssmenucss-shapes

To avoid loading a CSS and JS file on a specific Rails controller, follow these steps:

Is there a way to prevent specific Rails app Controllers from loading the default css and js that is applied throughout the entire app? Appreciate you taking the time to read this. ...

javascriptcssruby-on-railsrubyruby-on-rails-4

Ways to display a horizontal ellipsis at the end of a paragraph

Utilizing an HTML entity to display three dots (...) is my current method of indicating that there is more text available. While CSS (text-overflow: ellipsis;) offers alternatives, I am restricted in using CSS styles. The problem lies in the fact that the ...

htmlcss

Using the combination of Chrome browser, Lucida Grande font, and word-wrap

Recently, I encountered a unique situation in Chrome where an odd combination of styles led to an issue. To help illustrate the problem, I created a fiddle which can be viewed here: http://jsfiddle.net/C3CbF/1/ This particular issue is only visible if you ...

cssgoogle-chrome

The text color of the tabs turns black when a tab is selected - I receive my results after clicking anywhere on the screen

I am currently using HTML, CSS, and Bootstrap to design some tabs. Here is the current result I am achieving: https://i.sstatic.net/qbUck.png When clicking anywhere on the screen, I see the original results based on my code. The outcome after clicking a ...

javascripthtmlcsswebbootstrap-4

Is there a way to include a text file in HTML for referencing or posting on my website?

Managing a website where my colleagues frequently post updates can be time-consuming as I am the only one knowledgeable in html and css. I find myself constantly formatting their posts and creating new pages for them. I am exploring ways to simplify this ...

javascriptphpjqueryhtmlcss

Slideshow feature in Bootstrap 4

Encountering an unusual problem with Bootstrap 4's carousel - it was functioning properly until I made some changes; even after deleting it and re-adding, the issue persists. The arrows seem to be misplaced view image <body> <ul class="nav j ...

htmlcssbootstrap-4

Customize images using CSS

My website contains numerous images with text, such as buttons and navigation elements. To facilitate localization, I use 2 CSS files. One file contains language-neutral properties like font and color, while the other file includes language-specific prope ...

asp.nethtmlasp.net-mvccsslocalization

Create a 3D visualizer on my site using various images of the object from multiple perspectives

Looking to incorporate a 3D object into my website, but the file size is too large. I'm considering taking images of the object from various angles and utilizing code to create a visual 3D effect when users interact with them. I was inspired by a web ...

javascripthtmlcssweb3d

How to include an image in a CSS file for a React project

I'm attempting to use an image from public/assets/subtract.png, but I am encountering a resolution issue. Here is the code snippet in question: body { background-image: url("./assets/subtract.png"); } The specific problem I am facing is ...

javascriptcssreactjsjsx

Resizing an image using CSS

I am attempting to implement a specific scaling effect using CSS. Below is an illustration of what I am aiming for: An image positioned 300px from the top of the browser page, with static text above it. The challenge is to ensure that the image scales prop ...

htmlcss

Display a PDF on a website and ensure it is horizontally scrolled to the center

After embedding a PDF in a webpage, I noticed that the width of the window is smaller than the actual PDF, resulting in a horizontal scroll bar appearing. Surprisingly, the PDF itself has wide margins on both sides, making it challenging for users to view ...

javascriptjqueryhtmlcsspdf