I am trying to left-align all lines of text string within a table in netsuite, but the text does not always have the same width, i.e. is not always more than 1 line.
The demo template seems to work okay;
demo
However, when it comes to printing a sales order, the text string that spans multiple lines, ends up adding white space to the all but the final line of text. Similar to justify style, even though this is never mentioned in the template.
actual
Add this CSS to your templates to fix this issue:
td p {
text-align: left;
}
Credit
Related
There should be a simple solution to this, but so far it's eluded me.
This is what I want to achieve, inside a single td:
text text
text txt [div [img][img] ]
txt t txt
The div just protects the two imgs from getting moved around promiscuously (they're buttons, the left one sometimes invisible, and need to stay side by side) The text, which can vary in length, needs to line up flush-right with the div, not wrap it.
Because of the amount of massaging I have to do on updates, which are frequent, I can't solve it by using a second td to hold the div, tho that would otherwise be ideal.
This is the basic code for one item (there are several, assembled into a string in a for loop, which is then written to an .innerHTML)
'<td class="Label" id="rank'+i+
'">Some text of<br>arbitrary, but not great,<br>length'+
'<div class="x">'+untie_button('off')+tie_button(i)+'</div></td>'
Class Label declares color, font, and text-align:right
Class x declares some padding and vertical-align:middle.
The routines untie_button and tie_button are trivial, merely returning the appropriate img with an id indexed by i attached.
I get one of 2 results, depending on what flavoring I try: the text is completely above the div, or it wraps the div.
Putting the text to be flush-righted into a span declared inline-block, followed by the div also declared inline-block, inside the td declared with vertical-align:middle seems to do the job well enough for my purposes (it has little adaptability). I'd to move the id from the td to the span, but that's okay since I'm not trying to modify the td as such.
*sigh* Hope this helps someone else.
I have some data outpu in a HTML table, some rows have expandable data fields and this works ok. Some rows are standard and are fine. The widhts seem to be controlled correctly via the CSS.
The Problem
I have limited the size of the table columns and set Overflow to hidden to prevent the data being pushed of the side of the screen, this works ok for Plain text inside a however if the data inside a is XML (which has been formatted for HTML using replacement chars) with a very long string before a line break, this data pushes of the side of the screen.
See the following JSfiddle for an example of what happens
http://jsfiddle.net/bj0jav2y/
What can i add to the XML to force the text to wrap onto another line similar to "Click to expand) This works as expected. Lorem" line.
Including the code below so i can post. Ignore this its all in the JSFiddle
.outer td:nth-child(4) {
width: 65%;
overflow: hidden;
}
Thanks
Your XML has a bunch of characters in it. stands for "non-breaking space," so it is specifically designed to do the opposite of what you are asking - that is, it will not break even if it is too long for the line. If you replace all the instances of with a plain old space '' character, then your XML will wrap just like the lorum ipsum text.
Tell the browser to do it:
.outer td {
word-break: break-all;
}
Try this:
.content span {word-wrap:break-word;}
Technically your xml is being treated as an unbreaking line.
I guess this problem is very simple to solve, but I don't know what to search for..
I want to have always the same space between words in multiple lines. Like invisible tables, but I want to avoid tables.
Example:
01.01.1999 Text
02.01.1999 Text gdfgf
03.01.99 Text gfghdh
How would you do this?
PS: I need a solution which applies on each row, because the data is delivered row per row through serverside scripts.
You could use the <pre> tag, unless you're looking for special formatting within each row. Description lists <dl> maybe another option in that case.
<pre>
01.01.1999 Text
02.01.1999 Text gdfgf
03.01.99 Text gfghdh
</pre>
Technically you could place a span (with the same class) around the text that you want to pad out and give the span the same width so that it pushes the other text out.
for example:
span{
width:100px;
display: block;
float:left;
}
In HTML, is it possible to have a group of an image and text that cannot be broken by word wrapping? i.e. would either be rendered together on one line, or wrap together to the next?
This can be done with words, by using but I want to add a small, letter sized icon to this group.
Example:
<p>
Some some normal, wrappable text
<span class="unbreakable"><a><img src="logo.png"></a>&nsbp;<a>Product Name</a></span>
</p>
NB. for brevity I have removed the attributes from the <a> tags.
Currently, it is possible for the "logo.png" image to appear on one line, and "Product Name" on the next.
This code is part of a resizable element, sometimes it will be capable of being rendered on 1 line, others it will need to, so I don't want to force a <br> for the times it is not needed.
Extending from comment:
As you want to combine logo and product name as a whole "un-wrappable" part, you can use white-space:nowrap:
fiddle
.unbreakable
{
white-space:nowrap;
}
Yes, so I got the problem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.
Example:
http://jsfiddle.net/r3CFJ/
I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence:
http://jsfiddle.net/r3CFJ/1/
How can I fix this please any solutions?? as my further coding will get very ugly and not readable?
You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).
If you remove the CSS it looks just fine on 1 line.
Look: http://jsfiddle.net/r3CFJ/10/
Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.
You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.
Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)
If you want the image and text will be inline set a or fancybox_vid to be position:absolute;
Example http://jsfiddle.net/huhu/r3CFJ/30/