I am working to build a screen in my app with several text fields in it. I wish the user to be able to enter a large amount of text in each of them.
There are two problems:
The standard TextField widget is only one line high. I would like it to be many lines high so the user can see all that they have typed.
The standard TextField's behavior seems to act like a typwriter, where the text scrolls infinitely from right to left as the user types. I would like the text to wrap when it hits the edge of the screen.
In short, what I am looking for is your standarrd issue text entry box just like you would be typing into if you were asking a question here.
How do I go about implementing one in Flutter?
TextField Widget has maxLines property.
You can use it like this.
new TextField(
maxLines: 5,
textAlign: TextAlign.left,
decoration: new InputDecoration(
hintText: "Enter Something",
),
)
Related
I have a dialog that contains a few text fields where the user can provide input, like this.
The problem im having is that whenever the user clicks on one of the textfields , the mobile keyboard messes everything up. It looks like this:
I want to have the dialog remain the same - as in, it shouldnt shrink and force the user to scroll down to see the full dialog. I tried using the FullscreenDialog-component, but the problem remains the same - the mobile keyboard just shrinks it and makes it scrollable for some reason. Is there any way to fix this?
EDIT I found a way to sort-of fix this, at least temporarily - add a minHeight to the bodyStyle in the dialog and the keyboard won't overwrite it. Obviously you have to move the dialog up so that the keyboard doesn't block it when it appears :)
I've experienced a similar problem but the solution may not help in every situation.
In my case, the main <Paper /> component height was set to window.innerHeight and another <Paper /> component inside it was set to about window.innerHeight * 0.6. I use this and not simply a CSS unit 'vh' since it compensates for the URL bar.
In the nested paper, I had a <TextField /> and the same problem you described occurred. The solution is basically to listen to onresize event since it fires when the keyboard opens, then you simply use the maxheight of all those measures.
To make it perfect you may want to respect device rotation since it really does require you to use the new height, and of course make sure the component is positioned correctly.
Must show a text that is greater than the component in which it is inserted. Currently, the text does not wrap automatically.
I've tried using the following components: Text, Label and Display Field
Have you tried a text that contains white space? A single word that is too long won't be wrapped ever, but multiple shorter, space-delimited words maybe will, depending on the component you use.
If you want to show a long text, use a container and put the text into the html configuration, and it will auto-wrap.
The components you named also have their usage, but not for simple long text:
text is from the draw package, and good for specialized formatting.
displayfield is good inside a form whenever you want to display (read-only) some value that is part of the record that you load into the form. displayfield won't wrap at all - try textareafield with readonly configuration for that.
label is good as the label of a form field, but only if used via the labelable mixin, which does most of the work. A label should make its content wrap around if you provide a fixed width or maxWidth, but it does not automatically adhere to the parent object layout.
you can simply add styles to extjs components (you can use any of them):
word-wrap: break-word;
There are some ways to apply custom css styles to ext's elements
style: {
"word-wrap": 'break-word'
}
Also you can do this:
Ext.get('txtElement').setStyle('word-wrap', 'break-word');
I have multiple forms and want to use one Window class to view them. Now it happens that all forms have a different size and I don't want to manage all of them so I thought about the 'fit' layout along with a min/max wight/height for the Window.
But that would be to easy, if I have applied dockedItems the layout messed up along with error that the layout failed. Whatever this error is supposed to tell me... But OK I googled and found out that I need to define a height and a width to make this error go away along with a new special property called: shrinkWrapDock which should tell the layout to depend on the size of content.
So again my Question
Which Layout would I take when I want to auto fit a form in a window while the window has a max-/min-size?
Edit
It don't has to be strictly a form, it is just Ext.window.Window configured with a 'fit' layout which should maintain a min / max size for itself. So a very small item within the window may have unused space while a very large one get scrolbars. All in between the min/max of the window are scalled exactly.
e.g.
// lets say we have a window configured like this
{
xtype:'window',
minHeight: 50,
maxHeight: 500,
layout: 'fit'
}
To small form -> adding a form with just one textfield.
Window uses minHeight: 50 because one field has only a height of ~40 px
Fit within min/max -> adding a form with 6 textfields.
Windows scales to size required by the form ~ 240px
To height form -> adding a form with 20 textfields
Window uses maxHeight: 500 because 20 field has a height of ~800 px
Use a panel inside window(which has fix max,min ht wdt) as parent container, use flex property for it items i.e your multiple forms
eg :
{
xtype:'panel',
itemId:'somePanelId',
layout :'fit',
items :[
{
xtype :'form',
flex : 2,
items [{..}]
},
{
xtype :'form',
flex : 3,
items [{..}]
}
}
Try different combinations of flex for each form as per each form's size. While giving flex consider as fix number say '5' here as outof i.e 2/5 size for form1 and 3/5 (three out of 5) space for form2.
Using ExtJS,
new Ext.slider.MultiSlider({
renderTo: 'multi-slider-horizontal',
width : 214,
minValue: 0,
maxValue: 100,
values : [10, 50, 90],
plugins : new Ext.slider.Tip()
});
now this will display slider, but my requirement is to make it work when css is turned off?
trying to make it compliant to section 508.
Since I don't have your working example, I will use the demos I found. It seems as though none of the sliders on that page get keyboard focus, therefore you have bigger issues than making it work without CSS.
As a work around I would probably recommend you putting a compliant text box next to the slider so that somebody could use the text box to update the slider.
I've been looking everywhere, but I can't find an answer to my problem maybe someone out here can help me.
I have a panel with a toolbar
The toolbar has 3 items (Button, Textfield, Button)
This works fine, I can press buttons, I can't write, edit, etc. in the Textfield...
But if I change to: Button, component, button
And in the component I write a html: ''
The focus manager (maybe something else...) kicks in ... well.. not really so good with that text input, I can write... but I can't press Backspace, if I do, nothing happens, nor I can press the arrow keys....
Is there a way to supress the focus manager only in that text input??? or to the whole toolbar (I don't really need it)
I've tried the "Ext.FocusManager.disable()" but that doesn't work (also the Ext.FocusManager.enabled returns false... so maybe it's not really fault of the Focus Manager)
I've narrowed down the problem to the toolbar...
I created a Text Input some place else, and all the keys work... I moved that same input (using jquery) inside the toolbar... and the backspace and arrow keys stop working... if I move it out, the keys start working again :S
I need it to be a text input because I'm planning on using a jQuery plugin which hides the current input and replaces it with another input... so you see... even if I use textfield, the textfield will get hidden and a text input will replace it without backspace and arrow keys functionality
Any help will be greatly appreciated
Regards!!!!!!!!
ok....
Using the xtype: 'textfield' there was something odd for me....
Ext.FocusManager.enabled
returns false....
If I do a Ext.FocusManager.enable(); and after that a Ext.FocusManager.disable();
Even the xtype: 'textfield' stops working with the backspace and arrow keys :O
So I guess FocusManager has something to do....
anyway, I provisionally solved my issue :P
I left the component as textfield
{
xtype: 'textfield',
name: 'emailsi',
id: 'emailsi',
labelStyle: 'width: auto',
labelWidth: 120,
width: 500,
fieldLabel: idioma.personasInvolucradas
}
And when the text input gets created via jquery it applies display: none to the previous textfield
So... I restore the display:block and also apply a position: absolute; float: right; z-index: -1; so it gets hidden again and doesn't disturb the layout :P
And finally, to restore the Backspace and Left/Right Arrow Keys functionality........
I create a .focus() event in jQuery, like this:
$('.textboxlist-bit-editable-input').focus(function(){
$('#emailsi>div>input').css({display: 'block', 'z-index': '-2', position: 'absolute', float: 'right'});
Ext.getCmp('emailsi').focus();
});
Basically, I discovered that as long as the original textfield has the focus, I can press backspace in the text input :) (also there's where I apply the css thing, first it was outside the focus event, but when the toolbar gets repainted, the textfield goes back to display:none)
If someone has a better solution, it will be very welcomed :D
Regards!!