I am adding a span elements dynamically from input field into a div. When they reached the right end of the div. It overflows in the same line.
However, when the number of span elements are pre-defined into a div element then they are not overflowed and they comes down and starts from a new line. I want this way.
I analysed both the element structure in firebug and both look same.
Here the fiddle for demonstration - FIDDLE
Please let me know for any mistake I am doing and if there is any workaround.
Since span is an inline element, it's affected by whitespace in the HTML.
In your predefined example, you have a line break between each span.
To make your JavaScript version work, you need to add some whitespace.
Add either a line break:
$("#box1").append("<span>"+val+"</span>\r\n");
or just a space:
$("#box1").append("<span>"+val+"</span> ");
The choices are equivalent, but your intention may be clearer with a line break.
How about adding CSS
.span{
display: inline-block
}
Related
The issue
I'm having a weird issue that I'd like to resolve. I have two spans which are next to each other in my code. When you select the last word in the first span, it will select the first word in the span next to it.
Here is a JSFiddle to demonstrate: https://jsfiddle.net/b7mybsLr/1/
What I have tried
Of the solutions I found online, the one which got me the closest was applying the CSS rule:
user-select: all;
This stopped the issue, but instead created a new issue because when you click the text it highlights all the text in the span which isn't really what I want.
I've also tried adding:
display: inline-block;
Which has also not helped, as seen in the demo.
I have also added ' ' to the end of each line, which actually does fix the issue. However, ideally this is code we'd like to avoid in our codebase.
And finally, I have tried swapping out the spans for divs, but as seen in the jsfiddle, the issue is still there. I'm not sure if this is a React issue in the way it renders the DOM, or if it is a CSS issue - thank you.
It is because the browser sees the text One and Test as a single piece of text. You can see this by removing the margin from the css. You will see the text OneTest
To fix this just add a space at the end of the TestComp text as in
<TestComp type={'span'} text={"Test Span One "} />
Or add your to the end of the tag as in
<TestComp type={'span'} text={"Test Span One"} />
There are lots of ways to overcome it.
Here's a simple jsFiddle:
http://jsfiddle.net/cEDj6/
I have one span element that I bound mouseover to. When I move the mouse horizontally across different lines of text, mouseover happens only once. However, when I move between lines of text within the same span element, mouseover happens multiple times.
Is this expected?
Is there a standard way of preventing this (short of adding logic to consider the last visited element)?
Using Chromium, version 28.0.1500.71 Ubuntu 13.04 (28.0.1500.71-0ubuntu1.13.04.1).
This seems to stem from an inline elemnt <span> with multiple lines of text. In reality space between each line is not contained in element as far as mouse is concerned.
This can be seen by putting background color on element. Changing it to block elemnt in css with display:block alleviates the problem, or by using other native block elements other than span
Background demo
If you make it a div instead of a span it works as expected
This is odd usage of a span. Since the semantic element is a <p> tag, use that. This also will correct your issue.
Funny enough, it's because the span is an inline element and it's wrapping. Because a span is an inline item, and it's wrapping, you get individual lines, and there is space between the lines. I never picked up on this before, but, because you have a mouseout event, it makes it more obvious. To demonstrate this, check out this update on your fiddle.
Fiddle: http://jsfiddle.net/LSRvn/
The reason a DIV doesn't do this is because the DIV is a block element containing the items.
Code is here http://jsfiddle.net/Ea7hd/1/
Basically my output needs to match the indentation of the html elements as they appear in the textarea.
The problem is that when I am looping through all the elements in the textarea I have no way of adding proper indentation because the I have no way of setting where one element is in relation to its parent.
You can use <div> with padding-left: http://jsfiddle.net/Ea7hd/5/.
Identation, padding and margin are styles, so you should achieve them trough CSS, so you shouldn't do it adding .
I need to hide elements based on what a user does. if he presses "a only", I can say something like
for(i=0;i<document.getElementsByClassName("b").length;i++){
document.getElementsByClassName("b")[i].style.visibility="hidden";
}
but this will leave empty spaces between elements in the list (the invisible elements still occupy space), which looks bad, is there a better way this can be done.
try style.display="none"
Using visibilty="hidden", the elements will still take up their calculated space on the page.
You may also consider using jQUery. It makes tasks like these incredibly simple.
Yep. You are setting the visibility CSS property to hidden. This stops the element from being displayed, but it still occupies space.
You want to set the display property to be none. This removes it from being displayed, and stops it occupying space - effectively removing it from the document, at least as far as displaying it is concerned.
for(i=0;i<document.getElementsByClassName("b").length;i++){
document.getElementsByClassName("b")[i].style.display = "none";
}
Use display: none instead of visiblity: hidden. The visibility property only hides the element; the display property actually removes the element from the layout.
For visibility:hidden, the javascript parser will parse the elements css properties and hides, it actually exist on dom, but user cannot see.
For display: none, when javascript parser finds the element with display, it just ignore the element and it move ahead. So you have to user display: none;
I display a bubble help for some short span elements. The bubbles are centered below that span and look great as long as the span isn't broken over two lines.
Looks good:
tell <span>irregular: told, told</span>
Looks bad:
tell <span>irregular: told,
told</span>
It looks bad, because the bubble isn't centered under the span anymore. Is there some way using JavaScript or jQuery to tell, if that span is broken over two lines?
9000's comment is correct. The trick is having access to a <span> that you know will be rendered on a single line. You can do that by wrapping the first word of your block in a span with a specific id, you could also use the last word or some other single word; there are cases where a single word will cross lines but the first word should be safe.
Once you have something that is only on one line you can compare its height to the height of the <span> that will get the tooltip. If the <span> that is getting the tooltip is taller than the single-line <span> then it has wrapped to multiple lines.
Try this jsfiddle:
http://jsfiddle.net/ambiguous/JbMhZ/1/
Adjust the size of the right panes until the red text wraps but the green text doesn't. Then hit Run in the toolbar at the top and it should say this at the bottom of the Result pane:
#has-break spans more than one line
#no-break spans only one line
I'm not exactly proud of this hack but it should work.
I'm left wondering if a better positioning algorithm for your tooltip would be a better idea. Maybe pull the mouse coordinates out of the hover event and use that to position the tooltip rather than positioning it based on the <span>.
I think the nicer way to do this would be with white-space: nowrap in CSS:
CSS:
span.bubble {
white-space: nowrap;
}
HTML:
tell <span class="bubble">irregular: told, told</span>
With or without a line break you can just calculate using .css() in jQuery where exactly on the screen is that span located and then position the tooltip accordingly. Or you can use a jQuery plugin to do all this for you.
Not quite sure what levels of help you're looking for, but \n is the identifier for linebreaks in JS