When my input field is empty and not focused, Material UI would place the label inside the input field as a placeholder.
What I want is, to have the label above the input field all the times, similarly to what it looks like if the input field is selected.
How can I do this?
Example code:
<FormControl>
<InputLabel htmlFor="name">Name</InputLabel>
<Input name="name"
value={name}/>
</FormControl>
For those looking for how to achieve this with TextField component, here:
<TextField
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
After 30 mins of pulling my hair... I finally got it. The property you are looking for is not called disableAnimation as one could thought, it's the shrink property. API docs - https://material-ui.com/api/input-label/
<FormControl>
<InputLabel htmlFor="name" shrink='true'>Name</InputLabel>
<Input name="name"
value={name}/>
</FormControl>
Related
I'm trying to remove the border around a outlined textfield
<TextField
variant="outlined"
label=""
multiline rows={55}
placeholder="# Hello World"
style={{ width: '90%' }}
/>
but no solutions that i have found worked. I've tried to tinker with all i can find but none remove the border.
If you would like a TextField without the outline border, the best thing to do would be to use the Standard variant of the TextField Component.
By default the Standard variant will have an underline beneath the text, but this can be removed by adding InputProps prop and passing in disableUnderline: true:
<TextField
InputProps={{disableUnderline: true}}
variant="standard"
label=""
multiline
rows={55}
placeholder="# Hello World"
style={{ width: '90%' }}
/>
The result will look exactly the same as if you had an outlined TextField without the outline.
Note that it's not recommended you do this, though, for usability reasons; it'll make the text field less distinguishable and less of a clear touch target for users on mobile. Make sure you have some other kind of indication that it's a text field.
https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03
I have a text input field and a sign up button. Since it's a password the user is going to enter in the field I want the input to be hidden. Any ideas on how to implement this feature?
I also want the field to be sort of disabled if the length of the password is less than 5 characters and longer than 12. (UPDATE: SOLVED IN BACKEND!)
I would be able to figure out at least the min and max length if I was using ''normal'' frontend styling, but I'm trying out Material UI for the first time and I can't really find the right information on how to make this work now.
<TextField
id="Password"
label="Password"
value={password}
onChange={handlePasswordChange}
variant="outlined"
/>
<Button variant="contained" color="primary">
Sign up!
</Button>
Add the type attribute like this:
<TextField
id="Password"
label="Password"
type="password"
value={password}
onChange={handlePasswordChange}
variant="outlined"
/>
This is a follow-up question to How to bind integer Input value to Slider.
I have found out that the demo solution in this answer only works when there are integer values in the slider and the language of your browser is set to English.
Snippet from the demo:
<Input xmlns="sap.m"
xmlns:core="sap.ui.core"
core:require="{FloatType: 'sap/ui/model/type/Float'}"
type="Number"
value="{
path: '/value',
type: 'FloatType'
}"
/>
To reproduce the issue:
Go to the settings of your browser.
Set e.g. German as the language.
Reload the demo.
If the step of the slider is then set to an integer value (e.g. 1), values are all shown correctly in the input field.
With step="0.1", however, only integer values are shown whereas float values (e.g. "1,4") are hidden, causing warning in the browser console:
The specified value "1,4" cannot be parsed, or is out of range.
Any ideas or better solutions?
In that case, remove type="Number" from the <Input> control.
The property type="Number" in UI5 shouldn't be used together with value-binding anyway, due to browsers implementing HTML <input type="number"> behavior slightly differently, according to the API reference:
Only the default value sap.m.InputType.Text may be used in combination with data model formats. (Source).
Found a solution:
A formatter is needed that replaces the "," with a ".":
formatStringToNumber: sNumber => parseFloat(sNumber.replace(","))
In the binding of the input then simply add the formatter:
<Input
width= "50px"
type="Number"
value="{
path: '/passageWidth',
formatter: 'formatStringToNumber',
type: 'FloatType',
formatOptions: { emptyString: 0 }
}"/>
I want to read the default text inside an input text field. For Example: -
Reservation Text Value
I want to read - "Enter Reservation Number" from the input field. And I need to verify this text.
Here is the html value: -
<div class="input-field" ng-class="{'has-error': !$ctrl.isValid}">
<input id="reservation-number" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-maxlength" maxlength="30" required="" title="reservation-number" ng-blur="$ctrl.reservationModified($ctrl.reservationNumber);" ng-model="$ctrl.reservationNumber" type="text">
<label class="avoid-overlap ng-binding" for="resNumber"> Enter Reservations Number </label>
How can I read that using protractor?
I have tried these css value:-
element(by.css('.avoid-overlap.ng-binding').getText();
element(by.css('label.avoid-overlap.ng-binding').getText();
element(by.css('ng-pristine.ng-untouched.ng-empty.ng-invalid.ng-invalid-required.ng-valid-maxlength').getText();
getText() returns a promise.
See the documentation. An example explains how to solve it.
Thank you for the help. It is working now. I tried this code:-
element(by.css('[for="resNumber"]')).getText();
And It is working fine for me.
I want to do this in html:
<div class="input-group" id="name">
<input type="text" class="form-control" name="name" placeholder="Name">
<span class="input-group-addon">None</span>
</div>
I try this in GWT Bootstrap:
<b:InputGroup>
<b:TextBox b:id="name" placeholder="Name"/>
<b:InputGroupAddon>
<b:Anchor ui:field="noName" text="None"/>
</b:InputGroupAddon>
</b:InputGroup>
But thus I get the error:
Illegal child <b:Anchor text='Name' ui:field='noName'> in a text-only context. Perhaps you are trying to use unescaped HTML where text is required, as in a HasText widget?: <b:InputGroupAddon> (:56)
Why? b:Anchor implements HasText interface.
My aim is to add a link on which, when a user clicks input will fill value NONE
The HasText bit is about InputGroupAddon, not Anchor. "Text-only context" (implied by implementing HasText) means you can only put, well, text into that widget. Either through the text property (<b:InputGroupAddon text='Name' />) or inside the tags (<b:InputGroupAddon>Name</b:InputGroupAddon>) - those declarations are equivalent. You can't put unescaped HTML or widgets in such a context.
For your use case, I'd recommend using buttons (as the Bootstrap docs suggest):
<b:InputGroup>
<b:TextBox b:id="name" placeholder="Name" />
<b:InputGroupButton>
<b:Button ui:field="noName" text="None" />
</b:InputGroupButton>
</b:InputGroup>
See the demo to see it in action. You can easily style it to your needs (maybe no text and just an icon = "ERASER").