CODEWITHSUNDEEP
cssinternet-explorerinlinecontenteditable
mwolce
mwolce

Reputation: 151

Inline contenteditable tags fail to align correctly in IE

I have a situation where I have inline contenteditable span tags together with other non-contenteditable tags which work fine in all browsers except for IE. In IE the tags fail to act as inline and start forcibly aligning themselves as block (sort of). I need something to make them act as inline. It seems that IE is forcing some weird behaviour when the tag is contentedtiable.

<div class="container">
<span class="text" contenteditable="true">Lorem ipsum dolor </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> sed dignissim maximus mattis </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>

Here is the fiddle with an example: http://jsfiddle.net/glennmicallef/m7tkgo2u/

Open the fiddle in both IE and Chrome (for example) to see the difference.

Upvotes: 5

Views: 103

Answers (1)

user2173353
user2173353

Reputation: 4640

In my case, I used the :before and :after pseudo-elements to achieve this.

[contenteditable=true]:before {
  content: attr(before-content);
  margin-right: 2px;
}
<div class="container">
  <span class="text" contenteditable="true">Lorem ipsum dolor </span>
  <span before-content="Tag" contenteditable="true"> sed dignissim maximus mattis </span>
  <span before-content="Tag" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>
</div>

This keeps the pseudo-element part non-editable and the rest editable.

The UX is only good on IE though...

Upvotes: 0

Related Questions