I have a separate PHP file containing the logic and form code for an upload script I written. I have included it into a div on my admin page and I have it set to float: right. However, when I select a file with an exceptionally long filename, it pushes the entire form away from the right hand side of the page and I wish to be able to truncate it. I have tried variants of overflow: hidden and text-overflow: ellipsis but can't get it to shorten as it's a part of the HTML browse form.
e.g.
Original:
01123581321345589144.jpg
Truncated:
0112358...
Thanks in advance
Related
I need to perform a full PDF print of a website with a populated questionnaire. It's accessed via Chrome, but some fields contain extensive answers and they are partially cut as they do not fit within the line. The text can be extracted via copying, but it's not fully visible in a print (I'm sorry, I cannot provide a full picture).
To make the full contents visible in the print, I would like to break it into several lines. I heard that it could be done by adding the "word-wrap: break-word" or "overflow-wrap: break-word" properties, bit it appears that it's an Input field and, from what I heard, such fields are not breakable and I would need to change it to Textarea.
However, when I change the field type to Textarea, the contents of the field disappear.
Is there any relatively simple way to somehow make this field breakable and show full text which was previously provided as an input?
textarea does not have a title attribute. That's why the text disapears. Try to insert the text like this: <textarea>Text should be here</textarea>.
I should preface this by saying I have already tried several fixes found on this site for similar questions (such as Set the table column width constant regardless of the amount of text in its cells?) to no avail.
I am generating tables of user comments (1 comment per table) via AJAX. In brief, input of text and click of a button calls an AJAX function which accesses a php file; the php file then displays the user comments chronologically based on an algorithm I have developed. Works fine...(the most up to date relevant code follows)
$current.="<table border=\"1\" width=\"550px\" table-layout=\"fixed\">";
$current.="<tr width=\"550px\">";
$current.="<td width=\"60px\"><img src=\"" . $Picture1 . "\" style=\"float:left\"
width=\"50px\" style=\"border: 0\" height=\"55px\"></td>";
$current.="<td width=\"485px\">";
$current.="<div style=\"width:485px\"><font size = \"2\" style=\"font-
family:arial\">  <b>$user1</b></font>  ";
$current.="<font size = \"2\" style=\"font-family:arial\">$usercomment1</font>";
$current.="</div></td>";
$current.="</tr>";
$current.="</table>";
EXCEPT when the user comment exceeds the horizontal bounds (width) of the table (about 60 characters). Note that without the div in the table cell as shown above (and setting EVERY td, tr, and table element to a fixed width), the comment expands the bounds of the table to the right (revealed by showing the border). Amazingly, with the code above (that is, with the div included), the text of the user comment actually goes outside of the table (text actually simply writes over the right table border like it wasn't even there and keeps moving right, as if the div/text has a higher z-index).
Right now, my quick and dirty fix is to set maxlength='60' for the input text field of the form which generates the user comment, but I don't like this method, as limiting characters to 60 is like Twitter-lite. Any ideas on why my table issue is occurring?
try Using elipsis for the text
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
it will help the text not to over flow else try using overflow property
With more testing, I was able to auto insert line breaks in the way I needed using the wordwrap() function:
http://www.php.net/manual/en/function.wordwrap.php
Worked like a charm
My quest to to understand how to get data from a text field to email has so far got me nowhere so im now trying a different approach (a workaround to be more precise). I have created a form in HTML, im using the mailto function because this is the only way I can seem to get any data of the iphone to email. My next problem is that because there are appox 300 text fields in total it makes this a very long page. Also, with the email button at the bottom of this html page it creates an annoyance for the user. In some instances only perhaps 4 of the text fields will be used meaning this will be a huge long email for four text boxes . Is there any way i can break it up in to manageable chunks, or dynamically add the text fields as much as the user needs? I realise that the ideal solution would be to do all this properly but its just out of my skills base. I have tried incorporating some controls from cocoa controls for this but couldn't understand how to get that working in my project, hence the use of mailto as a final resort!
Your question isn't very clear, but I'll try to answer. Maybe you should pay attention on the trick like in LiveJournal(line on the bottom of the page).
.buttonClass {
left: 50%;
margin-left: -0.5*buttonWidth;
postion: fixed;
bottom: buttonHeight;
}
In that case your button will be fixed at be the bottom of the page and user could scroll as much as he wants.
I have an application that generates tables for reports; however during printing - the tables may get split, which causes some of the information to get cut off ( I mean it's only printing the top half of letters and then getting split to the next page ).
I've tried page-break-before ; however that causes every table to be on it's own page. page-break-inside seems to be only supported by Opera (And I'm not even sure if that's what I want).
What I'm hoping to find, is something that if the entire table cannot be fit onto a page - it is pushed to the next; or better yet - if the next row is started on the next page.
Any help would be appreciated!
Use Javascript:
Parse data inpage and reformat
Get table height
If table height > page allowed height = add a new table
Each page fits into:
div.page {
height: 842px;
width: 595px;
}
The simplest way of achieving this is a print button that opens a new page, the data is there in a format that Javascript can convert it into a table.
This is the only real accurate way I know of configuring a page of data that splits in tables.
In a HTML form I have a file field like this:
<div class="filefield">
<input type="file" name="myfile" id="fileinput">
</div>
It displays a button and some text besides the button. When no file has been selected yet, the text is: No file chosen. If there is a file already selected, it displays the name of the file.
This text displays on the right side of the button. I want it to display below the button. I have tried numerous things in CSS, and nothing works, the No file chosen just always displays on the right side of the button, even if both the div and the input are given fixed widths only as wide as the button, and a fixed height high enough for a button and two lines of text, the text still displays on the right, outside of the div, and not below where the is space inside the div. How to make it wrap so the text displays below the button?
With #Guffa's answer showing that you can't mess with that field, you could create a hack around it.
What about a button element, that on click acts like a file browser button? And then a span element that holds the value of that file browser input? It would be some js hackery for sure, but could solve the problem.
EDIT
Working example: http://jsfiddle.net/nmeAW/1/
Edit 2
Even more better working example: http://jsfiddle.net/nmeAW/2/
You can't. The file input field is a single control, even if it looks like several controls that could be controlled separately.
Besides, how the file input control is displayed depends entirely on what browser you are using. It's appearence is not specified in the standards, so any browser vendor can choose to display it any way they see fit.
You might look into jQuery and some of the upload file plugins that can help you "restyle" the input essentially by hiding it and activating/displaying file selected information in html.
http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/
http://www.uploadify.com/demo/
http://www.plupload.com/example_queuewidget.php
http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/