I need to style my input field border on the basis of input value length.
<div *ngFor="let o of options">
<input id="" type="text" [ngClass]="{{}}" placeholder="Search Value"(keyup)="search(o,$event)" />
</div>
You can add bindings to individual styles, not just classes, based on your properties/values/etc.
<div [style.border]="thing.length > 10 ? '1px solid red' : ''">
...
</div>
Please refere below stack overflow answer, he has given multiple ways to add classes dynamically based on conditions (assuming you already have input value length).
You can add any css to classes not just border.
https://stackoverflow.com/a/41974490/3292176
Related
Sometimes input elements are visually presenting their values however these values are not presented in the element HTML. Not as "text" and not as "value" attributes. Like here
Actually, it's a value attribute, but it is hidden.
I mean even existence of value attribute itself is hidden.
I'd like to understand why those value attributes are hidden ?
From the frontend development side, I believe there are a few ways to ensure value stays empty while the element still displays the user's input from the DOMString. For example, From this HTML documentation
input and textarea elements have a dirty value flag. This is used to track the interaction between the value and default value. If it is false, value mirrors the default value. If it is true, the default value is ignored.
So, if the default value is empty, and this dirty value flag is set, value attribute will remain empty regardless of user input.
<button> , <input> and <option> elements, the value attribute specifies the initial value of the element. that's why input elements “value” attributes are not presented in the HTML?
In case of text type input elements (and some others as well), in native HTML value attribute of the element presents its default value.
The text value inserted by the user is not presented there, so only the default value will always presented in value attribute.
In case no default value is set for that element, the value attribute will not be presented in the element HTML.
Similarly to the presented in the attached screenshot.
We need to understand what is value attribute ?
In general, The value attribute specifies the value of an <input> element.
Let's say for button - it defines the text on the button.
for password input field it must be hidden.
So for any sensitive field a value attribute should be hidden.
Update 1 :
To answer your question in more details, I have created 2 html files.
HTML File 1 :
<form>
<div>
<label for="title">Post title:</label>
<input type="text" id="title" name="title" value="My excellent blog post">
</div>
<div>
<label for="content">Post content:</label>
<textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
</div>
<div>
<button type="submit">Update post</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657">
</form>
here value is
value="My excellent blog post"
and in UI it looks like this :
Now let's assume if it was a username input field just as you have described, we don't want to pass value attribute in that case, instead it should be placeholder attribute.
Let me remove value attribute and put placeholder instead.
HTML :
<form>
<div>
<label for="title">Post title:</label>
<input type="text" id="title" name="title" placeholder="Enter your title here">
</div>
<div>
<label for="content">Post content:</label>
<textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
</div>
<div>
<button type="submit">Update post</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657">
</form>
and in UI it looks like this :
Now, having said all these, a placeholder attribute is not a mandatory field it depends on UI developer and Business unit.
I have same problem as described in this toppic:
Angular JS ng-message inside directive
Unfortunatelly that solutions is not working for me, because I am using my custom directive inside ng-repeat. So now ng-messages work only when error condition is fulfilled for all inputs.
http://plnkr.co/edit/lJT48bmYvR9DGFliIYDH?p=preview
I have tried many ways for creating ng-messages condition but nothing worked properly. Two of them You can find in above plunker:
ng-messages="form.doubleInputLeft.$error"
ng-messages="form['doubleInputRight' + $index].$error"
Please help me,
Regards
For input elements to work inside an ng-repeat, the index must be included as part of the name attribute.
<!-- index must be included in the name attribute --
<input name="doubleInputLeft" class="form-control ngMessageSample" type="{{inputType}}" ng-model="modelLeft" ng-minlength="2" ng-maxlength="20" required>
-->
<input name="doubleInputLeft{{index}}" class="form-control ngMessageSample" type="{{inputType}}" ng-model="modelLeft" ng-minlength="2" ng-maxlength="20" required>
<div ng-messages="form['doubleInputLeft'+index].$error" class="ngMessagesClass" ng-messages-multiple>
<div ng-message="minlength" class="ngMessageClass"> {{leftInputHeading}} must have at least 2 characters.</div>
<div ng-message="maxlength" class="ngMessageClass"> {{leftInputHeading}} must have at most 20 characters.</div>
</div>
Otherwise, the repeated elements will have duplicate names.
The DEMO on PLNKR
Consider below html code, which uses bootstrap 3 input group to create an input three input groups.
<h1>border radius</h1>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<input value="false" type="radio"/>
</span>
<div class="input-group">
<span class="input-group-addon">*</span>
<input type="text" class="form-control"/>
<span class="input-group-addon">?</span>
</div>
</div>
</div>
The default bootstrap style puts border radius for all input groups, which is not good for the middle input groups (I mean the tiny left radius around * ).
To remove this radius, I try to set the border radius for all input groups to zero except the last one.
div.input-group > div.input-group > span.input-group-addon:not:last-child{
border-radius: 0px !important;
}
But it did not work !
Please let me know what is wrong with this selector, and if I can do it easier !
fiddle : http://jsfiddle.net/mtamx8bs/
:not() is a functional pseudo-class so it needs parentheses around its argument:
div.input-group > div.input-group > span.input-group-addon:not(:last-child)
And on that note I removed the !important as it's no longer needed now that I've fixed the selector.
Due to the way that Bootstrap applies the rounded border styling to the .input-group-addon class, only the first and last "addon" within an .input-group will end up with rounded corners.
Based on this, I'd suggest you consider wrapping all your required elements in a single input group, rather than trying to nest one inside the other.
For example:
<div class="input-group">
<span class="input-group-addon"><input value="false" type="radio"/></span>
<span class="input-group-addon">*</span>
<input type="text" class="form-control" />
<span class="input-group-addon">?</span>
</div>
I updated your fiddle with these changes if you want to play with it. (Edit: or check this one for a slightly more verbose version, showing how much cleaner the code looks with multiple groups)
As an extra note: there are some cases where you may end up nesting different types of "group" classes from Bootstrap, but you'll probably need to play with them to work out which combinations will achieve exactly what you want.
This page in the docs shows an example of two button elements (normal button and a drop-down button) inside an .input-group-btn class, which is nested inside an .input-group.
I'm using Twitter Bootstrap. Select boxes are always narrower than input boxes.
How can I make them the same width? Adding padding helps, but it looks ugly.
EDIT
Here is a little example - http://jsfiddle.net/DfY8z/2/
Same example with custom class applied - http://jsfiddle.net/DfY8z/3/
I can use classes like span3, span4 etc. But I want my inputs to fill all available space (and to be the same size) so I'm using custom class.
Just adding input-sm class just next to the form-control worked for me.
<select class="form-control input-sm" id="xxx" ... >
<input type="text" value="" name=""><br>
<select>
<option>Some options which is very very long... </option>
</select>
The result is the exact size of the boxes.
You appear to be using an older version of bootstrap (current version is 2.2.1). Select boxes and input boxes in newer versions are the same size when no class is applied and when resized using the span* method
If you need to set a custom size you will have to use 2 different custom classes or target select boxes and input boxes individually. The input boxes need to be 14px smaller than select boxes (as do text areas).
See updated example
// code sample because its required
<input class="myClass" type="text" value="Abcdefghijklmnop" />
<br />
<br />
<select class="myClass">
<option> ABC </option>
<option> XYZ </option>
</select>
place the control
inside a div and apply class="col-sm-2" on the div.
<div class="col-sm-2">
<select></select>
you can change col-sm-2 col-sm-3 as per your requirement
This has worked for me -
Go to bootstrap.css file and comment out the following --
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }
This works:
<select style="width: 200px">...</select>
Ok I have a Html element like this
<input type="button" id="harhar"/><label for="harhar">Im only for Id</label>
Is it possible that i can refer a label to a element not using id but a class? like this one
<input type="button" class="harhar"/><label for="harhar">Refer me as a class</label>
is this possible?
NOTE: this is for the sake of creating dynamic Jquery UI buttons in the server-side, that is why I want this to refer a class
No, it is not possible to match a class and a for together. However, there are things that you can do to ensure that your id's and for's are uniquely different from other for and id attributes.
When you generate your elements on the server-side, use a for loop or some other looping construct to enumerate your id/for attributes.
<input type="button" id="harhar_1"/><label for="harhar_1">Im only for Id</label>
<input type="button" id="harhar_2"/><label for="harhar_2">Im only for Id</label>
<input type="button" id="harhar_3"/><label for="harhar_3">Im only for Id</label>
If you can generate your HTML as such, then you'll be able to match up your labels and values while still using unique ids.
Additionally, there is nothing preventing you from still applying a common classname to all of your elements so that you can still easily refer to them with CSS or selectors:
<input class="harhar" type="button" id="harhar_1"/><label for="harhar_1">Im only for Id</label>
<input class="harhar" type="button" id="harhar_2"/><label for="harhar_2">Im only for Id</label>
<input class="harhar" type="button" id="harhar_3"/><label for="harhar_3">Im only for Id</label>
This provides you with the hooks that you need to write succinct CSS rules or manipulate the DOM quickly and easily.
No, a label always refers to an ID, because only ID is required to be unique in the document, which is exactly what a label needs.
You will have to fall back to creating buttons with predictable, if dynamic, IDs.
according to the html specification you must use the element id in the for attribute.
However, the specification also states that
When [for attribute is] absent, the label being defined is associated with the element's contents.
So, you might be able to associate the label the the input by re-arranging your html code.
As per the specs label for must match an ID.
A workaround is making the label wrap the element it targets. It doesn't work best with screen readers etc though (you can use the same text as title attribute of the input element).
<label><input type="button" title="I am the same label" />
I know change how this's styled...</label>