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.
Related
Consider a container, which contains an icon as well as a label next to the icon. The container has a flex-Layout, which means its width is adjusted to the width of its content. I am only displaying the label if a boolean variable "showLabel" is set in my ts-component. This is simply done by adding *ngIf="showLabel" to the label inside my HTML file:
<div class="container">
<i class="material-icons">{{ iconName }}<i>
<label *ngIf="showLabel">{{ label }}</label>
</div>
I can toggle the "showLabel" variable upon clicking a button. In this case, the width of the container shrinks, since the label disappears. I would like to animate this process, while at the same time not specifying any hard coded width. Is there a way to achieve this?
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.
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'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'm making a web app. In it there are times when a form may be "read only". To simulate this with HTML, I have it so that all the (dynamically created) text boxes that contain content are disabled. This works fine enough, but if there is very much text and not all of it is visible at once(especially in multi-line boxes) then there isn't a way for the user to scroll around in it. Also, another issue is its not possible to copy and paste text from disabled text boxes.
So what I am needing is a way to make it so you can not modify the content in a textbox, but you can select the text, and the scroll bar works.
Also, I'm testing this in Firefox 3.5, though I believe IE has similar problems.(something compatible with both please)
Use JS:
<input type="text" readonly="readonly" onfocus="this.blur();" />
Also, perhaps make a scrollable div instead (overflow:auto; in CSS)?
What about simply using a <div> element with a static height/width and overflow: auto? You can add additional styles to make it look like a <textarea>, if desired.
EDIT: Made swallowed tag visible. Now it makes sense.
this.blur() will make it impossible to select, I think.
<input type="text" readonly>
should help.
Is HTML 4 and XHTML 1.0 compatible. Don't know about future compatibility though (i.e. HTML 5).