Issues with Column-Count Css in Safari when editing content divisions

I am working with a div element that has the attribute contenteditable="true". To achieve a two-column layout, I have added the CSS property -webkit-column-count: 2. However, I am facing an issue in Safari where when I type in the first column and press Enter, the cursor jumps to the second column. This behavior is not observed in Chrome.

<div class="textarea" contenteditable="true"></div>    

.textarea
{
  width:400px;
  height:300px;
  -webkit-column-count:2;
  -webkit-column-gap:25px;
  border:1px solid #000;
}

You can view the mockup here on jsfiddle.

javascripthtmlcss

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

Having trouble with callback function in Node.js npm opn package

I have been attempting to implement a callback function using the opn package (you can find the documentation here: https://github.com/sindresorhus/opn). Basically, my goal is to open a specific URL in a browser, wait for the user to close the browser, an ...

javascriptnode.jscallbacknpm

Assigning random classes from a pool of just 3 variables to over 20 different div elements

I have a total of 20 divs and three different hover effect classes. I would like to randomly assign one of these three hover effects to each div. The JavaScript code I am using is: <script> $(document).ready(function () { viewClasses = 3; randomNum ...

javascriptjqueryhtmlcss

Bootstrap modal experiencing technical difficulties

I am experiencing issues with my bootstrap modal. It seems to be malfunctioning, almost as if the CSS or JavaScript files are not being recognized. I have tried various solutions but have been unable to resolve the problem. I even attempted using the examp ...

javascripthtmlbootstrap-4

Which is better: Bootstrap or CSS Grid for creating 3 columns with equal height and overflowing content?

I am trying to figure out the best way to create a container with three columns of content. I can't decide if using bootstrap or CSS Grid would be most effective. Instead of having distinctly separate columns, I would like one continuous column that ...

htmlcssbootstrap-4

Tips for choosing an item in a multi-select dropdown using Selenium WebDriver

Currently delving into Selenium WebDriver while utilizing Java.. I am curious about how to select values in a Multi-select box where the options are already pre-selected. If I want to choose two or more additional options, how can I go about it? The HTML ...

javahtmlseleniumselenium-webdriver

Allow only a specific section to be scrollable, instead of the whole page

Currently, I am immersed in a project where one section must dynamically populate elements pulled from a database. Due to this dynamic nature, the quantity of elements can vary significantly. The challenge lies in our design concept, which aims to elimina ...

csshtmloverflow

When using jQuery, hover over an li element while ignoring its children

I'm working on customizing a Wordpress menu that has a submenu. I managed to add an arrow to the 'li' element that contains a submenu, and created a hover animation with CSS when the mouse moves over the 'a' tag inside the 'li ...

javascriptjqueryhtmlcsswordpress

Reverting button highlighting when another button is selected in Web development using CSS and Bootstrap

On my signup page, I have two buttons that control the display of corresponding containers. However, I encountered an issue where clicking a button changes its background color and keeps it changed even after selecting the other button. If I click the same ...

javascriptcsshtmltwitter-bootstrap

Utilizing an External Variable in a Callback Function in Node.js / Express.js

Currently, I am utilizing a library known as node-geocoder within express js with the code snippet provided below: var NodeGeocoder = require('node-geocoder'); var options = { provider: 'google', // Additional values may be nece ...

javascriptnode.jsexpress

Ways to access and delete the canvas using ref steps?

Having a canvas in a react component, I utilized react refs to access the node and implemented a destroy() method. However, I encountered an error: TypeError: canvasRef.current.destroy is not a function How can we properly access the node (canvas) using r ...

javascriptreactjscanvas

The EJS view fails to render when called using the fetch API

Within my client-side JavaScript, I have implemented the following function which is executed upon an onclick event: function submitForm(event) { const data = { name, image_url }; console.log(data); fetch('/', { method: &apo ...

javascriptexpress

Is it possible to customize the styling of certain fundamental MUI components using makeStyles?

:D This is my first time embarking on a project from the ground up using react and MUI. I've been curious if I have set it up correctly. My goal right now is to incorporate some styling using makeStyles for certain components provided by Material UI ...

javascriptreactjsmaterial-uistyled-components

Can an Angular Component be connected to an array of functions for callbacks?

I am working on an Angular component that shows a list of items. I want each item in the list to have a set of menu buttons that trigger different functions in the parent component/controller. Is there a way to create a component binding that accepts an ...

javascriptangularjs

Converting Epoch timestamp to AM/PM format in a React render function

I am currently working on a personal project using React.js. I have successfully fetched an API, and one of the values returned is an Epoch timestamp. My goal is to display this timestamp in a human-readable format such as am/pm. The Epoch timestamp is dis ...

javascriptreactjstimestampepoch

transmitting information to Laravel via ajax

Is it possible to send a multi-step form data separately to the Laravel controller in order to store them into MySQL? An example would be sending the inputs data shown below: <ul> <li> <input type="radio" class="step1r1" value ...

javascriptphpjqueryajaxlaravel

Conduct a text search within mongoDB to retrieve the corresponding reference document for every item stored in the collection

I am in the process of developing a search functionality for a collection of trips. This search feature will check if the trip includes specific city names (origin and destination). Each trip entry contains the user ID of the person who created it. The sea ...

javascriptnode.jsmongodbexpress

Is there a way to showcase a lightbox exclusively on the homepage of my blogger blog?

Here is the snippet of code I am struggling with: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/> <script src='https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.color ...

javascriptjqueryhtmlcsslightbox

In the provided Javascript snippet, how would you classify `word` - a function, variable, or object?

Understanding that an object is a variable and a function is a type of object, I find myself confused about the proper way to reference word in the following code snippet: var word; exports.setWord = function(c, ch){ word = c.get('chats')[ch]; ...

javascriptfunctionvariablesobject

Ensure that the footer is always positioned at the bottom of the page according

I've been struggling to get my footer to stay at the bottom of the page based on content. I've tried several CSS techniques and strategies, but I'm still encountering one issue. footer { width: 100%; padding: 25px 0 25px; backgr ...

htmlcssangulartwitter-bootstrap-3

Strange actions when using the scroll feature in Selenium

While working on UI automation, I came across an interesting behavior. Typically, I use JS function or actions.moveToElement(WebElement) to scroll to a particular element. This method works well for checkboxes, textboxes, and buttons types of elements. How ...

javajavascriptseleniumscrollui-automation