I have a <div contenteditable="true"></div> and when I enter some content into it, then delete these content, it seems like the browser is inserting a <br> element automatically into this element.
Does anyone has any experience with this? Know how to fix it?
Use SPAN element as your contenteditable element instead of DIV element.
Please read complete.
Q. Why the idea works?
A. Span is an inline element and Div is a block element. Block elements when empty, by default, will have zero dimensions(if no padding is applied to the block element). In contrast, empty inline elements tend to maintain their height and width becomes zero.
Hence, we just need to provide proper width to this Span(or any inline element), but, an inline element won't take width as a property and therefore we need to specify the display of this inline element as inline-block or block.
I have extensively used this idea for creating online-editors. Hope this helps.
NOTE: On changing display of an inline element to block/inline-block, doesn't mean the nature of element has changed. It is still an inline element, so an inline element will never be able to hold a block element inside it.
I ran into this issue before developing a feature for a web app. It's a default behavior for browsers. It's the same as a line break for text editors. Best way to handle it is to run a RegEx on the content when submitting/grabbing it to remove the tags, and then blanking it when no text is available.
I typically use the <br> tags to figure out where my line breaks are. Some browsers use <p> tags, so be sure to cross-browser test it.
Another way around this problem is to change the behavior of how the white space is handled inside the element. Use CSS:
white-space: pre-wrap;
Check out this link for both the solutions.
I was running with same problem when i make a element content editable i figure out a is inserted at the point i make element contenteditable at same time i remove breaks from the element. That perfectly worked for me.
myselect.attr('contenteditable', 'true');
myselect.find('br').remove();
This issue happened to me when the callback of $(window).KeyUp event returned no value.
Once applying "return true" in the registered callback the contenteditable div stopped applying unnecessary br tags.
This seems to work fine for me. If you want to remove the whitespace you can use:
str = $('div[contenteditable="true"]');
str.replace(/ /gi, '');
If you want to remove the <br> you can use:
str = $('div[contenteditable="true"]');
str.replace(/<br>/gi, '');
I was finally able to reproduce this. No matter what type of element is, contenteditable element will be inserted into a <br> element when all element node in it is empty(textContent==='')
Here provide a stable example which can reproduce this:
<p
style={{ padding: 10 }}
contentEditable tabIndex={1}>
<span></span>
{"123"}
<span></span>
</p>
Change element type from p to span can not solve the problem.
So the suggestion is check empty element and remove it in advance.
Related
I know it's wrong to put a block element inside an inline element, but what about the following?
Imagine this valid markup:
<div><p>This is a paragraph</p></div>
Now add this CSS:
div {
display:inline;
}
This creates a situation where an inline element contains a block element (The div becomes inline and the p is block by default)
Are the page elements still valid?
How and when do we judge if the HTML is valid - before or after the CSS rules are applied?
UPDATE: I've since learned that in HTML5 it is perfectly valid to put block level elements inside link tags eg:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
This is actually really useful if you want a large block of HTML to be a link.
From the CSS 2.1 Spec:
When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.
This model would apply in the following example if the following rules:
p { display: inline }
span { display: block }
were used with this HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>
The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.
The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.
Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).
Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 did not define this behavior, CSS1-only and CSS2-only user agents may implement this alternative model and still claim conformance to this part of CSS 2.1. This does not apply to UAs developed after this specification was released.
Make of that what you will. Clearly the behaviour is specified in CSS, although whether it covers all cases, or is implemented consistently across today's browsers is unclear.
Regardless if it's valid or not, the element structure is wrong. The reason that you don't put block elements inside inline elements is so that the browser can render the elements in an easily predictable way.
Even if it doesn't break any rules for either HTML or CSS, still it creates elements that can't be rendered as intended. The browser has to handle the elements just as if the HTML code was invalid.
The HTML and the CSS will both still be valid. Ideally, you wouldn't have to do something like this, but that particular bit of CSS is actually a handy (and syntactically valid but not semantically valid) way for getting Internet Explorer's double margin bug without resorting to conditional stylesheets or hacks that will invalidate your CSS. The (X)HTML has more semantic value than the CSS, so it's less important that the CSS is semantically valid. In my mind, it's acceptable because it solves an annoying browser issue without invalidating your code.
The HTML is validated independently of the CSS, so the page would still be valid. I'm fairly sure that the CSS spec says nothing about it either, but don't quote me on that one. However, I'd be very careful using a technique like this, as while it might render as intended in some browsers, you'd need to test 'em all—I don't see many guarantees being made.
Are the page elements still valid?
“Valid” in an HTML sense, yes; HTML knows nothing about CSS.
The rendering you get in the browser, however, is ‘undefined’ by the CSS specification, so it could look like anything at all. Whilst you could include such a rule in CSS hacks aimed at one particular browser (where you know how that browser renders this case), it shouldn't be served to browsers in general.
I don't know off the top of my head if this validates any rules but I would recommend using the W3C HTML Validator and the W3C CSS Validator to determine that. Hope this is helpful!
If there is a logic you follow and you end up implementing it like this, it's NOT WRONG. Working things are not "wrong" just because they're weird. Yes, it's quite unusual but it HELPS and it's not a mistake. It's intentional. HTML and CSS should serve you, not the other way around so don't ever listen to comments telling you not to do it just because it's ugly.
It's typical to call a solution "invalid" and suggest a long way around the block. Sometimes you can rethink what you did. But there can be many reasons for what you did and they don't consider them.
I do use blocks inside inlines regularly. It's valid and it's working - it's just not necessary in most cases. So what. Remember when XHTML told us to always put quotes around properties (and everyone yelled at you if you didn't!), now HTML5 allows to omit them if there's no space inside. What happened to that last slash after singular tags? "<br />" ? Come on. Standards change. But browsers keep supporting non-standard things as well. CENTER is deprecated; we're in 2013 and it still works. TABLE for vertical centering? Sometimes it's the only way. DIV inside A to make it hover as you planned? Just go ahead.
Focus on important things.
I think, (x)html is valid, css is valid. Is the result valid? Yes, if it is looking in the browser as You want.
No, It is not a wrong choice. We can use as per requirements.
I need value "1" to be displayed adjacent to "Id" field but its displaying in a new line.The tag is supposed to be inline not sure why its being moved to new line.
jsfiddle
HTML
<b>Id : <p id="productid">1</p></b>
A <p> element is a paragraph, which by default is a block element.
In this case, you can't use <p> because:
It is not allowed inside <b> elements (because <p> can only be used where flow content is expected, but the content model of <b> is phrasing content). Always remember to validate your code.
Semantically, it's clear that it isn't a paragraph.
I suggest using
<b>Id: <span id="productid">1</span></b>
Demo
#productid{
display:inline-block;
}
p is a block level element by default. You can set it to display inline-block to make it do as you describe using basic css.
I'm not sure if you are unable to access css, so in case you cannot, see oriol's answer. No reason not to just make it a span.
Bit of a side note, it is a little odd to put a p tag inside a b tag. Technically you CAN do this, but it looks like using a span tag is the more proper way to handle this.
Is there a way to have blank HTML tags or in other words, tags that do nothing? For example <p> turns the inclosed text into a paragraph, <b> turns the text bold, <div> creates a box. I'm looking for a tag that has no effect on the text or it's environment. I want this so that I can customise it myself with css or js.
I am <x class="FancyText">king</x> of the world.
There are no “blank HTML tags”. What come closest are span and div, but the latter causes line breaks before and after (block rendering) by default and cannot be used in inline context, and the former does not allow any block-level elements inside it.
In practice, you can use a made-up element, like <foo>...</foo>, though with some problems on older versions of IE. This is widely regarded as a bad move, though; using span or div, as appropriate, with a class attribute is recommeded.
Consider explaining what you are really trying to achieve, instead of referring to fictional HTML tags expected to do nothing.
For this you'd use either the div or span element. From the HTML5 editor's draft:
The div element has no special meaning at all. It represents its children.
The span element doesn't mean anything on its own. ... It represents its children.
The difference between them is that the div element should be used where flow content is expected (that is to say, sections on a page), whereas the span element should be used where phrasing content is expected (within text).
In the example you've given, you'd want to use the span element:
I am <span class="FancyText">king</span> of the world.
You can do the following:
<div></div>
This will do nothing unless you add a class or id.
Or,
<span>Some text</span>
This will do nothing unless you add a class or id.
if you want to use <x ...> txt </x> as a place holder,
than any officially-unused set of chars will do fine.
I use <a> ... </a> for that
As I understand, width/padding/margin properties only work on block level elements. However, on INPUT and SELECT elements I am able to specify the width, which works. Should it?
I could write something like this:
<input type="text" style="display:block;" />
But is it necessary?
Can anyone explain please why it works?
Actually, they're not really inline elements, but rather inline-block elements. This allows you to specify width, height and other block-specific properties without the need to break the flow of inline elements. In good browsers you can use "display:inline-block" on any element to achieve the same thing.
The spec says:
Applies to: all elements but non-replaced inline elements, table rows, and row groups
Form controls, such as input and select elements are replaced inline elements (the element is replaced with a form control - the text content of it is not displayed like a normal element).
Since they are replaced, they are not non-replaced, so the width property applies.
Form elements are the black sheep of the HTML/CSS world - there's lots of properties which don't work like normal HTML elements.
While it doesn't answer yor question, you might find the following discussion interesting: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
Technically, that's a rendering property which is browser-specific. At this point most browsers do allow you to set the width, but it's not guaranteed (especially on older browsers) and you definitely can run into bugs with it.
The W3 spec for the input element technically makes it an inline element. Inline-block isn't even a part of the W3 spec, it's part of CSS2 (hence older browsers being inconsistent).
IE has some funny bugs if you specify width as a percentage and put a whole lot of text into it, for example.
Long story short, it's almost always safe, just not part of any official spec that I've seen.
Did you thing what happened if that would be not possible? When INPUT element was introduced there was no CSS. And width of INPUT element is absolutely required in HTML for creating proper forms.
I know it's wrong to put a block element inside an inline element, but what about the following?
Imagine this valid markup:
<div><p>This is a paragraph</p></div>
Now add this CSS:
div {
display:inline;
}
This creates a situation where an inline element contains a block element (The div becomes inline and the p is block by default)
Are the page elements still valid?
How and when do we judge if the HTML is valid - before or after the CSS rules are applied?
UPDATE: I've since learned that in HTML5 it is perfectly valid to put block level elements inside link tags eg:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
This is actually really useful if you want a large block of HTML to be a link.
From the CSS 2.1 Spec:
When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.
This model would apply in the following example if the following rules:
p { display: inline }
span { display: block }
were used with this HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>
The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.
The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.
Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).
Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 did not define this behavior, CSS1-only and CSS2-only user agents may implement this alternative model and still claim conformance to this part of CSS 2.1. This does not apply to UAs developed after this specification was released.
Make of that what you will. Clearly the behaviour is specified in CSS, although whether it covers all cases, or is implemented consistently across today's browsers is unclear.
Regardless if it's valid or not, the element structure is wrong. The reason that you don't put block elements inside inline elements is so that the browser can render the elements in an easily predictable way.
Even if it doesn't break any rules for either HTML or CSS, still it creates elements that can't be rendered as intended. The browser has to handle the elements just as if the HTML code was invalid.
The HTML and the CSS will both still be valid. Ideally, you wouldn't have to do something like this, but that particular bit of CSS is actually a handy (and syntactically valid but not semantically valid) way for getting Internet Explorer's double margin bug without resorting to conditional stylesheets or hacks that will invalidate your CSS. The (X)HTML has more semantic value than the CSS, so it's less important that the CSS is semantically valid. In my mind, it's acceptable because it solves an annoying browser issue without invalidating your code.
The HTML is validated independently of the CSS, so the page would still be valid. I'm fairly sure that the CSS spec says nothing about it either, but don't quote me on that one. However, I'd be very careful using a technique like this, as while it might render as intended in some browsers, you'd need to test 'em all—I don't see many guarantees being made.
Are the page elements still valid?
“Valid” in an HTML sense, yes; HTML knows nothing about CSS.
The rendering you get in the browser, however, is ‘undefined’ by the CSS specification, so it could look like anything at all. Whilst you could include such a rule in CSS hacks aimed at one particular browser (where you know how that browser renders this case), it shouldn't be served to browsers in general.
I don't know off the top of my head if this validates any rules but I would recommend using the W3C HTML Validator and the W3C CSS Validator to determine that. Hope this is helpful!
If there is a logic you follow and you end up implementing it like this, it's NOT WRONG. Working things are not "wrong" just because they're weird. Yes, it's quite unusual but it HELPS and it's not a mistake. It's intentional. HTML and CSS should serve you, not the other way around so don't ever listen to comments telling you not to do it just because it's ugly.
It's typical to call a solution "invalid" and suggest a long way around the block. Sometimes you can rethink what you did. But there can be many reasons for what you did and they don't consider them.
I do use blocks inside inlines regularly. It's valid and it's working - it's just not necessary in most cases. So what. Remember when XHTML told us to always put quotes around properties (and everyone yelled at you if you didn't!), now HTML5 allows to omit them if there's no space inside. What happened to that last slash after singular tags? "<br />" ? Come on. Standards change. But browsers keep supporting non-standard things as well. CENTER is deprecated; we're in 2013 and it still works. TABLE for vertical centering? Sometimes it's the only way. DIV inside A to make it hover as you planned? Just go ahead.
Focus on important things.
I think, (x)html is valid, css is valid. Is the result valid? Yes, if it is looking in the browser as You want.
No, It is not a wrong choice. We can use as per requirements.