Is it possible to have a multi-line textbox (im using asp.net c#) where the maximum characters inputted cannot exceed the visible textbox size?
I have taken scrollbars off vertically (overflow: hidden).
Now I want it so that say if the multi-line textbox shows say 100px height (or say 5 rows), the user cannot type more than the height of the textbox?
There must be a JS/JQuery hack for this?
No, it is not possible.
Because ASP.NET textbox finally turns into HTML textarea which does not support text limit.
You can do this trick with JavaScript, sure, but what concerns visible area, it may not be so easy. You will need to somehow calculate metrics of the current font in use, then try to render in memory to see if the limits of the box are exceeded. One could such tricks when programming for Windows, but with web pages it is likely not possible.
Although it finally turns into a textarea you COULD do this, but it is hacky.
With JQuery on textarea keypress, check length of value, if it is over your threshold, remove last character.
Like I said hacky.
Good luck,
Dan
You can limit text max. char as following.
Client Side
function ValidateLength()
{
if(document.forms[0].txtFlightRemarks.value.length > MAX_LENGTH)
{
document.forms[0].txtFlightRemarks.value = document.forms[0].txtFlightRemarks.value.substring(0,MAX_LENGTH);
document.forms[0].txtFlightRemarks.focus();
return false;
}
}
Server Side (Page_Load): attach onchange and onkeyup events to required textarea.
txtFlightRemarks.Attributes.Add("onchange", "ValidateLength();");
txtFlightRemarks.Attributes.Add("onKeyUp", "ValidateLength();");
Related
In this sample, as you start typing into the textbox, a list of auto suggestions appears. I would like the width of this AutoSuggest popup to be as wide as the textbox.
But it seems that the AutoSuggest popup is set to be a certain width with no way to override it. I've tried setting the width css attribute, but it looks like the object is destroyed and rebuilt every time it pops up (or so it seems to me).
Is there a way to override the width of the AutoSuggest popup?
Paste it in your CSS and set the width as per your requirement
div#as_container {
max-width: 320px;
}
as a last resort you can listen onChange and 'correct' the width after each key press.
My bottom-line problem is that I need the TextArea to be up to 2 lines long to accommodate large amounts of text and then shrink to 1 line when 2 aren't necessary. The answer should be obvious, right?
private function OnScroll(evt:ScrollEvent):void {
if (!isNaN(evt.position)) DoWhatNeedsDoneWhenAScrollAppears();
}
...
<mx:TextArea scroll="OnScroll(event)" />
This way, a scroll bar should appear when there's more text than can be fit in the control, and I know I need 2 lines. Unfortunately, this doesn't work when I assign text to the text member, and I don't see any way to detect hidden text.
I've also tried:
public override function set text(s:String):void {
super.text = s;
invalidateSize();
invalidateDisplayList();
invalidateProperties();
}
Of course, even if I solved this problem, I'm left w/the problem of knowing when the shrink the line, and I wouldn't know that unless the text is an empty string.
I'm using the Flex 3.5 SDK.
My solution so far is to use measureText(). Whenever text is changed (by overriding the text set or by handing the change event) I see if measuredText() indicates that the string is wider than the control, in which case I make the TextArea twice as high. At least I tried that, until I saw just how unreliable measureText() is for that sort of thing. Now I double the height if measureText() indicates that the text is 95% of the control's width. And, it's still unreliable, but the lesser or 2 evils.
Is there a way to stop a label control that is not visible from taking up space on a form?
server side:
label.Attributes["style"] = "display:none";
or
label.Visible = false;
or, client-side (css):
#label-id { display: none; }
Set it's visibility to hidden through CSS. Or set it through the code behind to false. From the code behind a false setting should cause it to not be rendered at all.
Optionally, replace the label with a literal control and only emit something to it when you need to.
2 good answers already, so just a couple of notes:
Using Visible=false at the server-side is usually better since that will not output any HTML at all, as opposed to CSS which will output it but just hide it. Unless of course you need it there so you can unhide client-side.
The label itself usually doesn't add any space, it is the white-space before/after it that might, so yet another option (if you work in HTML source view 99% of the time like I do) is to remove any white-space before/after the control. Not as robust as the other options since it could be easy to get that white-space back by mistake (especially if the IDE does it for you while working in design view). Just thought I'd mention it, since this can be good to know if you want the label VISIBLE but don't want the "extra space".
I have a TextArea that shows the conversation from selected chat room. For valueCommit event I use: verticalScrollPosition = maxVerticalScrollPosition; And it works fine scrolling text to the bottom. However in one case it doesn't work as expected. There's verylittle text, so TextArea has no scrollbar and then I put a lot of text and a scrollbar is necessary. The text is scrolled almost to the bottom (still a few lines need to be scrolled down). I am pretty sure it gets maxVerticalScrollPosition as if there was no scrollbar. So the question is how can I wait with updating verticalScrollPosition with respect to TextArea's new size (that is now with a scrollbar). I tried calling validateSize and other methods that start with 'validate' but unfortunately with no luck. I also tried the old trick of putting caret at the end of text. So the TextArea's scrollbar makes a difference when getting maxVerticalScrollPosition and I need to update verticalScrollPosition once all measurements are done.
I forgot to mention. I use htmlText.
In the comments of the answer you accepted you mentioned a more elegant solution. Yeah, a timer probably isn't the best option -- you have eventListener cleanup if you remove the component from the stage; if you use the component more than once, you have another timer instance; etc., etc.
If you don't have a lot of post-commit-property actions, the quickest solution would be a call later on the setter of text or htmlText
override public function set text(value:String):void
{
super.text = value;
callLater( scrollToEndAfterTextCommitted );
}
protected function scrollToEndAfterTextCommitted():void
{
this.verticalScrollPosition = this.maxVerticalScrollPosition;
}
I hope that helps.
Best of luck!
Assuming the issue is fixed after you add additional text again, you could probably get by using a Timer, or a call to setTimeout and have the verticalScrollPosition = maxVerticalScrollPosition called a fraction of a second later and see if that fixes it.
I am designing a page to Add/Edit users - I used a repeater control and a table to display users. In users view the individual columns of the table row have labels to display a record values and when users click on edit button, the labels are hidden and text boxes are displayed for users to edit values - The problem is - as soon as the text boxes are visible, the table size increases - the row height and cells size becomes large. Is there a way to display the text boxes so that they take the same size as the labels
Dealing with tables, the question is: can your labels span on multiple text rows (ie: can you have long texts)? If yes, you may encounter layout problems any way. If no, a simple approach can be creating a CSS Class:
.CellContent { display:block; width: ...; height: ...; }
with your preferred cell width/height. Just stay a bit "large" with your height.
Assign the class to both your label and textbox, and you should not get width/height changes when switching control (thanks to the display:block property).
Again, if you have long texts, you will still encounter issues, and may want to use multilines. In that case, I would suggest ignoring height problems: just set the width to be consistent, and always show a 3-4 lines textbox for editing. Users will not be bothered to see a row height change, if they are ready to type long texts.
I'd use JS+CSS... You'll have to get your hands dirty for this one though. Visual Studio isn't going to help you much.
Here's how I'd do it:
Get the <td> clientWidth and clientHeight.
Set the <td>'s width and height to those px values (so they're no longer relative)
Swap the text for the input
In your CSS, make sure the input has no padding/margin/border and set width:100%, line-height:1em, and height:1em
When you switch back, make sure you un-set the <td> width and height so they return to automatic values.
You'll need to tweak this all slightly. I'm sure you'll have to play around with the padding on the <td> and perhaps set overflow:hidden but you should be able to do what you want.