How to implement a two-column layout within an IE contenteditable element

Currently, I am working on a contenteditable element that requires content to be displayed in a two-column layout. Users should have the ability to place the cursor anywhere within the text and move between positions using arrow keys.

To achieve this, I am utilizing the column-count CSS property to create the two-column display. While this method works smoothly in most browsers, I have encountered some issues in IE11. When I click inside a column, a box appears and arrow key movements are restricted within the column layout.

To better illustrate the problem, I have prepared a sample demonstration on https://jsfiddle.net/rex3c3yf/. Any JavaScript or CSS solutions to address this IE11 issue would be greatly appreciated.

Issue in IE11: https://i.sstatic.net/HWXl2.png

Answer №1

Consider utilizing the contenteditable="true" attribute for every p tag within your div element. You have the option to set it individually for each tag, or you can employ javascript to automatically add contenteditable="true" to all p tags inside your div.

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

What is the best way to alter the font size in an SVG?

I have incorporated an SVG icon into my website and obtained the following code from Adobe Illustrator: <svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9, ...

html css svg icons

Performing automatic submission of form data without needing to redirect or refresh the page using Javascript

I am trying to find a way to automatically submit form post data without the page redirecting, but I haven't had success with any of the examples I've found that involve jquery and ajax. Currently, my code redirects the page: <!DOCTYPE html& ...

javascript jquery html ajax

The issue of unselection not functioning properly for multiple items when using both selectable and draggable features

i need the unselection of list items to be as smooth as selectable() but without draggable() My desired outcome is similar to the following gif showcasing combined selectable and draggable functionality: https://i.stack.imgur.com/3GjTD.gif here's t ...

javascript jquery html jquery-ui draggable

Tips for removing special characters from HTML?

I'm currently grappling with the concept of the filter My situation is as follows: $htmlData includes a user-entered html string formatted like this $htmlData = array('<em>test</em>', 'text here','\n') ...

php html

Issue with the width on Mobile Safari

Encountering a strange problem with mobile Safari on iPads and iPhones where the body and some divs are getting cut off in the middle. Despite trying various solutions, I can't seem to fix it. The website works perfectly fine on desktop but not on mob ...

html css css-float mobile-safari

Ways to modify div content depending on the size of the screen

When the screen size becomes small, my goal is to modify the content within the row divs of the indices_container. Currently, all screen sizes display the index name, price, 1-day change, and year-to-date (YTD) change for each row. I only want to show the ...

html css bootstrap-4 frontend

Bring in a video file in order to watch it on your web page (HTML)

Is there a way to upload and play a video file using the video element? I am looking to add a video file to my webpage that can be played using a video element. <input type="file"> <h3>Video to be imported:</h3> <video width="320" ...

javascript html

The challenge of PHP's HTTP_REFERER

I am experiencing an issue with http_referer. In my setup, I have two files: index.php and index.html. The index.php file contains a form that, upon submission, includes information like the http_referer. On the other hand, the index.html file runs an aja ...

javascript php html ajax http-referer

Why is this strange red dot character 🔴 appearing in the URL in FireFox?

While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...

html url firefox character-encoding

What is the button that switches the bootstrap modal?

With my bootstrap modal form, I have multiple buttons that trigger it as shown below: <a href="javascript:void(0)" data-toggle="modal" data-target="#specialoffer"> <button class="green full" id="button1">Ask Question</button> </a& ...

javascript jquery html twitter-bootstrap

Exporting an HTML table to Excel with JavaScript runs into issues when it encounters the '#' character

Looking for a JavaScript solution to export HTML tables to Excel. I attempted a script that exports tables, but it stops when encountering special characters like '#'. Can someone assist me with this issue? Thank you in advance. <script src= ...

javascript html excel

The functionality to display dynamic images in Vue.js appears to be malfunctioning

As a newcomer to vue.js, I am facing a challenge in dynamically displaying images. Manually changing the images works fine, but I'm running into issues with dynamic display. I've come across similar problems online, but none of the solutions seem ...

javascript html css vue.js

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

I have designed tabs using the <button> element and enclosed the tab content within separate <div></div> tags like shown below: function displayTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsB ...

javascript html css

Determine the total number of elements within the Map tag using JSOUP

Hello, I am currently working on developing a web crawler using Java. One of the functionalities I need is to count the total number of sections present on the current page. These sections are located within area tags contained in a Map tag. Despite using ...

java html spring web-crawler jsoup

Is there a way to make the menu slide up from the bottom button instead of instantly appearing? Looking for solutions in HTML, CSS, and JS

I have attempted numerous methods, but the menu keeps showing up in the same way every time. I've experimented with changing the height from 0 to 20%, width from 0 to 100%, using jQuery, JavaScript, slideUp/Down, hide/Show, adjusting margin-bottom fro ...

javascript html jquery css animation

Using HTML and CSS to create a display-table for laying out a form

Working on a dynamic HTML/CSS layout that simplifies the process by using classes like form, row, cell label, and cell input to control elements (width, alignment, etc.). I decided to utilize display: table along with its child elements table-row and tabl ...

html css forms

no visible text displayed within an input-label field

Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow. I am puzzled as to why it's not even displaying the te ...

javascript html css reactjs

Converting canvas illustrations into HTML files

I am in the process of creating a drawing application that will be able to export into HTML/CSS/JavaScript. I plan to use this tutorial as a foundation for the drawing functionality. My goal is to take all the rectangles within the this.shapes = [] array a ...

javascript css html

The footer at the bottom of the page is currently malfunctioning

I was able to create an always on the bottom footer using code from Codepen. Here is the HTML: <div class="content"> <header> <p>blabla</p> </header> <main> <p>blaBlabla blub</p ...

html css apache xampp

Alert: Ajax encountered an issue with the auto-refreshing field

When running a script I created for a self-updating field, I encountered the following error message: UpdateField.html:37 Uncaught ReferenceError: fieldname is not defined at HTMLInputElement.onchange (UpdateField.html:37) Script: https://i.sstatic.n ...

javascript php html ajax

CSSer Q&A