Using Monaca/Onsen-UI - but struggle to understand the syntax of an input box whereby I want an icon placed in the [placeholder].
The following example from [] works, showing an 'email' type icon - which is clearly the result of [], but I don't understand to what that relates. Generally for OnsenUI i'd use a <i> (etc).
Can someone please explain to what the [] that refers and how I find out what the icon I want to use is...?
SAMPLE:
<input type="text" class="text-input--underbar" placeholder=" Notes" value="">
 - it is ASCII code of some icon from FontAwesome font. You may use this list to find symbol you need HERE.
Related
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
I am working on an angular application where we are using this [Angular-Auto-Validate] plug for form validations. This plug-in works automattically with all type of form validation which is quiet easy to use but we are facing an issue with this.
We want to stop validate to bootstrap style validations. It keeps us giving this error message.
Angular-auto-validate: invalid bs3 form structure elements must be wrapped by a form-group class
as per the plug-in documentation we added this few configurations but seems like we are doing something wrong.
validator.setValidElementStyling(false);
validator.setInvalidElementStyling(false);
This will be resolved if you place all your form inputs inside a form-group class. here is example.
<div class="form-group">
<input type="text"........../>
</div>
What are the controls that I can put inside a "md-input-container" with angular material design?
The reason why I ask this is because of this sample for example:
<md-input-container>
<input flex="" flex min="0" max="20" type="number" ng-model="testNumber">
</md-input-container>
Why I look at the "Spinner" aka slider samples:
https://material.angularjs.org/latest/demo/slider
Nowhere is the md-input-container used. But only when I wrap a input of type number with a md-input-container the look of the spinner seems right as a material component.
Looking at the API of the md-input-container:
https://material.angularjs.org/latest/api/directive/mdInputContainer
They mention only "Input" and "TextArea"
Well Input can be of any type...
When I look now back again to the spinner/slider samples all of them do NOT use a md-input-container.
So something is wrong or undocumented here.
md-input-container has to be a parent container for any type of input (text, number, date, etc) in order to get that material look and feel.
However, if you do not need these material-styled placeholders, labels and validation, you can still use input which is not nested in the container. That was the case in the Sliders example.
md-input-container supports only:
input
textarea
Only 1 input can be in each md-input-container or an exception will be thrown.
The md-slider demos and docs have all been updated to use md-input-container.
Many input types like email, week, number, month, password, search, tel, text, and time are supported by md-input-container.
The following types may not have ideal behavior:
checkbox - md-checkbox preferred
image - ng-click on img preferred
radio - md-radio-button in a md-radio-group preferred
file - placeholder alignment is off in Chrome
submit - md-button preferred
reset - md-button preferred
range - md-slider preferred
Please make sure to use the angular-aria module if you are using inputs in your project. It will automatically make your app more accessible and compliant to standards related to accessibility.
I am clicking to modal window which is pretty simple. In general only relevant part is this:
<div id="partSelection">
<button value="0" name="partSelection">BLATNÍK P L</button>
<button value="1" name="partSelection">BLATNÍK P P</button>
I need to click one of this button, I know how to click this with:
xpath:
element(by.xpath('//*[#id="partSelection"]/button[2]')).click();
also way with button text:
element(by.buttonText("BLATNÍK P P")).click();
but I noticed there as different values for each button and I belieave this is something which is not going to change by developers. Is there a way how to click element base on value?
Thank you for your advises.
Adding to an existing answer.
You can solve it using the following CSS selector:
element(by.css("#partSelection button[value=0]")).click();
Or, using a by.xpath() locator:
element(by.xpath("//div[#id='partSelection']/button[#value='0']")).click();
Note that, if you are going to use the "by value" technique often, to follow the DRY principle, it could be a good idea to define a custom by.value() locator:
How to globally add a custom locator to Protractor?
this example should work if you want to just look up a specific attribute. I usually refer to this css selectors when I'm trying to figure out the best way to find a specific attribute.
basically the breakdown is to find the tag you want in our case we want button and then we want to find the attribute within that tag. So we have the choice of value or name. Name is the same for both buttons so we don't want to use that. However the value is different for each button so that would be good to use in this case.
element(by.ccs('tag[attribute=""]');
tag = button
attribute = value
element(by.css('button[value="0"]')).click(); // button with text BLATNÍK P L
element(by.css('button[value="1"]')).click(); // button with text BLATNÍK P P
Simple problem here - but cant seem to find answer. I have added the angucomplete-alt to my project - I believe that I have added it all correctly - meaning, registering it and having the js file available when the page loads. But for some reason when I click on the input and start to type - nothing happens. I am unable to type in the textbox/input. below is my code for the control. - im double checking how things are wired up on the back end. - thanks in advance.
and this exact code works in another project - configured differently - but the markup for the control is the same
<angucomplete-alt id="searchGroupsAutoComplete"
placeholder="{{searchPlaceholder}}"
pause="400"
text-searching="{{searchingText}}"
selected-object="selectedAnObjectFn"
remote-url="/api/search/SearchByQueryStrings"
remote-url-request-formatter="formatSearchDataFn"
remote-url-response-formatter="formatReturnDataFn"
remote-url-data-field="Content"
title-field="Name"
description-field="EntityType"
image-field="ThumbnailUrl"
minlength="1" />
Remove maxlength="{{maxlength}}" of INPUT tag in $templateCache.put(TEMPLATE_URL,..... (angucomplete-alt.js)
so it worked, but I don't known why.