i have a input box created using angular reactive forms
<input type="text" formControlName="OrgName" placeholder="Enter name" maxlength="60">
<p class="fieldRequired" *ngIf="showNameMSg">{{60-profileForm.value.OrgName.length}} characters remaining </p>
there is a limit of 60 characters. currently i am showing it on a p tag under the input box.
how can i show the number of remaining characters with some sort of indicator inside the input box.
even if indicator not done.. atleast i must show the remaining numbers of characters available..
You can refer this if you want to achieve what you want with the help of CSS-
https://stackblitz.com/edit/angular-7xmzzf
You will have to provide a parent div with position as relative to your input and counter p tag.
The position of p tag will be absolute and you can adjust it using CSS (top, right) to get it in the desired position with respect to your input tag.
It can be done easy using Angular Material CDK inputs, using the property suffix, normally used to set icons, but also can be used to set more info, as you want.
For example, in a phone input:
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Telephone</mat-label>
<input type="tel" matInput placeholder="555-555-1234">
<div matSuffix>{{counter}}</div>
</mat-form-field>
</form>
You only need to build more rich feedback and that's all. You can test it here.
Related
In my site I limited the form components to be in a fixed size. at the same time, I allowed the label to break the text when the text is long and I wonder if there is a way to catch whether the label actually broke the text (so i could adjust the fixed height accordingly) or not
note that the label itself comes from the server (as a resource) and the site is presented on many device resolutions so I can't predict whether the text will break or not
my code looks like this:
HTML
<form>
<div class="long-label">
<label for="question1">What is your name?</label>
<input id="question1" name="question1" >
<span class="error" data-for="question1"></span>
</div>
<div class="long-label">
<label for="question2">What is your favourite colour?</label>
<input id="question2" name="question2" >
<span class="error" data-for="question2"></span>
</div>
</form>
CSS
.long-label {height:60px;}
.long-label label { white-space:normal;}
EDIT:
I've made a codepen example for what I'm trying to achieve
https://codepen.io/smallscalearmageddon/pen/eYNQGJK
I'll try to explain the scenario more clearly:
I have a form in my site with several inputs, labels above them and underneath them there are error spans that are being injected if and when the input value is not valid.
When that happens for a certain input, the error span is pushing the inputs underneath it down and the graphic guy said that it is ugly and the margin between the inputs should be fixed.
so I've fixed the height ({height:60px;}).
unfortunately, the labels above the inputs come from the server as resources in many languages and some of them are making the labels text vey long until it breaks into 2 lines.
when that happens + a validation error is being displayed - the error span is being overlaying the label of the input underneath it.
so what I was asking is:
is there a way to detect when the text breaks into a new line so I could fixed its height accordingly
I hope I was clear now
.long-label {min-height:60px;}
EDIT:
This pen is based on your example: https://codepen.io/ziad-darwich/pen/vYOQpyQ
I have an Angular Material page with a few input containers.
Some of these containers are aligned side by side with a space distribution of 33 % and 66 %. I want only one label above these input fields.
<div layout="row">
<md-input-container flex="33">
<label>My Label</label>
<input type="text" ng-readonly="true" ng-model="text1"/>
</md-input-container>
<md-input-container flex="66">
<label></label>
<input type="text" ng-readonly="true" ng-model="text2"/>
</md-input-container>
</div>
I placed my label above the first input container and over the second container an empty label.
And this is exactly where my problem is located, because on smaller screens the label gets truncated. This is completely comprehensible, but in my case I don't want this behavior of Angular Material. How do I achiev this? Here is a demonstration of my problem. On a smaller screen the label gets cut of.
tl;dr
I want two input containers with only one label. The label should be visible all the time, also on small screens, but it gets truncated.
Thanks for any help.
It was too simple!
All I had to do was preventing the overflow: hidden; attribute, which is set by default from angular material.
The default truncation looked like this:
After changing the style sheet to overflow: visible !important; the result is exactly what i wanted:
I made an update on the plunker example given above. Here is the new version.
I am really interested in making a PHP page with user input boxes and various other elements to look like the control boxes you see on old school GUIs that had borders beginning and terminating with the box label.
See here:
How to do that with css?
Don't use a div. HTML has <fieldset> and <legend> which are designed for this usecase and render like that by default.
<fieldset>
<legend>Motor 1 Log</legend>
<label>Movements <input></label>
<label>Over-Currents <input></label>
<label>Amphous <input></label>
</fieldset>
I'm using the inline-help class from bootstrap next to an input field that has a "span11" class. The span does not appear inline with the input field and rather it shows up on the next line because of the class "span11"
Here is the code:
<div class="control-group error" id="password-control">
<label class="control-label" for="password-confirm">Confirm Password</label>
<input type="password" size="30" name="register[confirm]" id="password-confirm" class="span11">
<span class="help-inline">password did not match</span>
when I get rid of span11, it shows up next to the input field. I need the span11 for responsive text fields so I can't remove it.
Any idea how I can fix this?
Thank you!:)
In Twitter Bootstrap, <input>'s are intended to be sized using the classes:
input-small
input-medium
input-large
input-xlarge
input-xxlarge
The spanX classes are more intended for <div>'s and other containery elements (though I admit to having used them to good effect on other things).
If you are using the responsive CSS that is provided with Bootstrap, once you get down to phone-sized viewport widths all spanX classes become width:100%;, which will guarantee that your help-inline content will get pushed to the next line.
At least with input-small and input-medium they won't ever fill the entire width, and you could keep the help-inline there, as long as the viewport isn't ridiculously small.
I have a series of labels and input boxes / select lists on a page. With each row , the label shifts a little more away from the top of the input box / select list. I want the top of the label flush with the top of the input box for every row.
I'm sure it's CSS-related but what do I need to change to fix this issue?
This shows the issue. At the top, you can see the text appears aligned with the box but each line shifts a little more away from the top.
This shows the CSS applied to the labels.
This shows the CSS applied to the select list. Both at the 5th items from the top.
This is the typical HTML for each row...
<div class="editor-label">
<label for="DOB">DOB</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-date="The field DOB must be a date." data-val-required="The DOB field is required." id="DOB" name="DOB" type="date" value="1/23/1945" />
<span class="field-validation-valid" data-valmsg-for="DOB" data-valmsg-replace="true"></span>
</div>
It looks like you do not have height or line-height set on either labels or fields. I believe you will need to specify both height and line-height so that each takes up the same amount of vertical space.