I am using ckeditor to edit my html text, here i want to restrict editable area in the ckeditor, i know how to give width and height for the ckeditor but i do not know how to give width and height for the ckeditor editing area.
Suppose if i give 700px width then user should enter the text only upto 700px, after that it should come to the next line.
I gave like below
CKEDITOR.replace( 'divedit', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
width: '700px',
height:'200px'
});
but it is showing scroll bar if the user types text beyond 700px.
Sounds like a strange requirement. I would try this:
Before saving get the editor contents
Insert into a preview div that has the exact same CSS as your requirements / target but no width
Get the width of the content with javascript
Check if width > 700, alert message the user that their content Sucks and don't save
Otherwise, save
Don't do this with every change event - it will murder your performance at some point.
BTW, I never use static width content in CKE, so I cannot see how this is ever a problem, but I guess you have different requirements or something. If this is to stop users from entering OOOOOOOOOOOOOOOOOOOOOOOOOOOOO... or such content that overflow from the box you are outputting content with, don't worry about it. Content such as that should be deleted or edited using other means and you can also use CSS to control overflows. Or you can validate word widths with a max chars per word limitation or something.
Related
I have a HTML template in which the text that goes into a <td> tag will be imported from a database field. The text could be anything from 3 to 200 characters in length, and the <td> it goes in to is 100% of the screen width. If the text is too long, to fit in the width of the screen, I would like it to be truncated and end with "..."
I could make it so it only imports a certain amount of characters from the field, however, there's no point trying to decide on something as the screen width of the devices this can be viewed on varies dramatically (750 to 1920 pixels) so it needs to show as much as possible for that screen, but cannot wrap as the height of the table rows needs to be fixed.
So instead of:
|Text within this cell is too long to fit in this|table cell
Would become
|Text within this cell is too long to fit in t...|
Ideally the "..." would be a hyperlink (as there is another page where this text exists in full.)
Javascript solution would be OK but preferred CSS/HTML5 if possible.
You can use the CSS property text-overflow: ellipsis. While the inserted ellipsis cannot be used as a link, you could add a "read more" link to accomplish this.
I was trying to create a dropdown that had dynamic values, basically there are 5 text boxes and a drop down on a page and the dropdown gets the values from those textboxes. If the user enters some text that is bigger than the width of the drop down then it is skewed on IE.
I fixed that by select:hover{width:auto;position:absolute}. Now the problem is if the user enters values that are all smaller than the original size of dropdown it contracts, I want a way so that it doesn't contract and still expands. Any thoughts??
I am using dojo and javascript, cant use jquery.
In JavaScript find the max width of the text, if it is bigger than the dropdown's current width, change the width to the max width of the text.
This will work like you desire (width not contracting) when you change the text again, because the JavaScript will find the max width of the text to be less than the dropodown's, so the width will not change.
Simple fix would be to pick a width for your Dropdownlist and set max and min lengths to your textbox values so you can control over the size of your submissions. Otherwise i could type in anything.
Ill get you back to 0 on your question and provide a solution.
Use CSS. On the select box set a width and even if the content in it is smaller it wont get smaller.
<select style="min-width:200px;" id="someUniqueIdentifier">
/* Your dynamicaly generated options*/
</select>
The most simple solution if I have read the question correctly would be to use the min-width property (developer.mozilla.org/en-US/docs/CSS/min-width) like so - select { min-width: 50px; width: auto; } - This would allow the width of the control to expand as needed but not to fall below the minimum width you defined. This could be defined on the :hover state selector, but would work just as well (and I would suggest) on the element itself. IE8+ support, no JavaScript required.
I just implemented the TinyMCE rich text editor on my site, and it is actually pretty awesome, but I do have 2 questions.
On this page for example: http://www.problemio.com/add_problem.php
1) What is the "Path p" text at the bottom of the text area? It doesn't make sense and I am not sure how to change it.
2) How do I make the default text area taller? I changed the page's HTML to this:
<textarea name="problem_blurb" cols="60" rows="9" id="problem_blurb"></textarea>
But changing the rows parameter does not seem to alter the height of the text area. Is there a way to change the text area height? I looked at the JS from the TinyMCE package, but its condensed and unreadable, so I am wondering whether there is an easier way to change the height of the text area.
Thanks!!
Path p means that you're inside a paragraph (html tag p). The path will show you where you are writing inside the rich text (So if you see div p means that you're inside a p which is inside a div)
Change the rows attribute will change the height. Try to change it to 15 and you'll see the difference.
1) The path is the current HTML element you're in, while editing. It means you're writing inside of a <p>...</p> (normal paragraph) element.
2) You have to use CSS width and height params. You could do something like:
<textarea name="problem_blurb" id="problem_blurb"
style="width: 500px; height: 300px;">
</textarea>
Note that if you have enabled the resizable mode in TinyMCE, it might has saved the current size and, then, ignore the CSS-set value. To be able to see your edits, clear your browser's cache and cookies.
1) Answered by Alf and AurelioDeRosa already. This is a very nice feature.
2) You can set the height and width of your tinymce editor using the width and height tinymce config parameter.
I have a textfield in a grid in which I wish to turn off text wrapping, but display a tooltip with the full text if wrapping is required. So, how could I detect if a field needs to wrap?
I tried to query the field's length, but it was either in em or in px based on if the user resized it. How could I get the wrapping status?
An option to detect if the text wraps - create (with jQuery, for instance) an invisible span with the same font settings and white-space: nowrap, set it's text to the field's content and check if the span's width is bigger than the field's width (in pixels, obtained via width())
Working fiddle: http://jsfiddle.net/TR98y/1/
Perhaps you can check the height (via scrollHeight) of the text container. It should increase when things start wrapping.
The only other alternative I can think of is setting overflow-x:hidden and then dettecting the overflow somehow.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Autosizing Textarea
Hello all, I am trying to solve a problem and getting absolutely no where with it. What I am trying to do is dynamically change the height of an inputbox when the users text overflows it's width (sorta like Facebook's status update textbox).
You enter a brief update, and if the text is longer than the textbox, it creates a new row. I tried using a textarea, but for whatever reason cannot force it to be exactly 1 row by default.
Anyone know an easy way of doing this? :(
You can manually control the size of the textarea using the CSS height and width parameters. By binding a keypress event to the textarea, you can get the amount of text in the box and adjust the height accordingly. For example, here's some jQuery that will add 20 pixels to the height of the box for every 50 characters you put in:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<textarea id="textbox" style="height:20px;width:400px;"></textarea>
<script type="text/javascript">
$(document).ready(function() {
$("#textbox").val('');
$("#textbox").keypress(function() {
var textLength = $("#textbox").val().length;
if (textLength % 50 == 0) {
var height = textLength/50;
$("#textbox").css('height', 20+(height*20));
}
});
});
</script>
You can tweak the values to get the desired effect.
To get the textarea to stretch, give this a go (jQuery): http://www.unwrongest.com/projects/elastic/.
As for the height of exactly one row, you could try rows="1" in the <textarea> tag, as well as removing CSS styling. Some browsers, however, may set a textarea's minimum height to more than one row.
Another solution would be to use a div on screen that, when the user clicks on it, makes the browser focus on a hidden textbox. The user types into the hidden text box, and the div is given the textbox's contents via. JavaScript. The tricky bit then is getting the flashing cursor, but you could use the pipe | character in the div and make it flash, although this starts getting long winded about the time you start it. I'd try with the textarea again personally :-)
Hope this helps,
James