When trying to wrap <md-datepicker> with <md-input-container>
I get an error like the one above, however one of examples from the project page
comes with that structure
<md-input-container>
<label>Enter date</label>
<md-datepicker ng-model="user.submissionDate"></md-datepicker>
</md-input-container>
After a couple hours of anxious, unproductive research I updated Angular Material from 1.0.7 to 1.1.0 and that fixed the issue.
Related
I wanted to implement a DateTimePicker using Angular Material.
I came to this example I went through all the steps.
In the site there were some live examples too. I was interested to implement the DateRange Example.
I found out that Angular Material doesn't use the md-input-container anymore, instead it uses mat-form-field.
I copied the code and a strange DateTimePicker is showing, not like in the site.
I think maybe angular doesn't understand this mdc-datetime-picker or it could be because I used mat-form-field.
Here is the code which I implemented just for testing:
<div layout="column">
<mat-form-field>
<label>Start Date/Time</label>
<input mdc-datetime-picker="" date="true" time="true" type="text"
placeholder="Date" max-date="dateTimeEnd" ng-model="dateTimeStart" class=" md-input"
readonly="readonly" id="input_0">
<div></div>
</mat-form-field>
</div>
Any Idea on where the problem could be?
For Angular 5 + material library.
The core problem:
I have an input field that is supposed to accept a comma separated list of words. Some of these words could be from a pre-existing list and some could be completely new. So if the word happens to be from the pre-existing list, I want to allow autocomplete to complete it. I am not able to get this to happen. Any help would be greatly appreciated.
The separator could be something other than a comma.
I thought I saw a tutorial, mostly a work around somewhere that shows this. It wasn't exactly what I want to achieve. Unfortunately, I didn't save it. If anyone has this link, it would help.
This is my code as of now. It behaves more like a drop down, then like autocomplete
<mat-form-field>
<input matInput class="form-control" id="category" type="text"
formControlName="category"
[matAutocomplete]="auto" />
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let category of categories" [value]="category">{{category}}</mat-option>
</mat-autocomplete>
</mat-form-field>
I have mostly used the Material library, but I am not very satisfied documentation-wise. If mixing in an autocomplete component from a different library would work better, any pointers would be helpful
I'm just working on a form and having some issues with the placeholder not displaying inside the textarea.
If I do backspace twice it appears. Tried lots of different suggestions after trolling this site but haven't been able to resolve the issue yet. Happens in all browsers.
<div class="form-group">
<label>Description:</label>
<textarea placeholder= "Describe yourself" style="height:200px;
width:300px; font-size:12pt; align-top: "name= "profile_description"
class="form-control" required></textarea>
</div>
The above lines work well on their own despite the CSS align-top being incomplete.
The issue is with one of your custom class names. Please remove them one at a time to isolate the problem.
Update:
On troubleshooting further with #ljean we found that there were whitespaces in the textarea tag leading to this behaviour.
Update:
And so here is the code with the whitespaces which were causing the issue removed.
<div>
<b class="text-white" style="float:right">Already a member? <a
href="../login/index.html" class="text-white" style="text-
decoration:underline;">Sign in</b></a>
<br>
</div>
I created a codepen to illustrate the problem. Just select all of the options in the dropdown, and you'll see that the display of the selected items will overflow the container. For reference, here's the html that causes the issue:
<div><!-- this container needs some arbitrary max-width to be able to see the overflow -->
<div layout="row"><!-- making this a layout="column" instead of row will fix it -->
<div layout="column"><!-- putting max-width:100% here will fix it -->
<md-input-container>
<md-select ng-model="test" multiple>
<!-- md-options -->
</md-select>
</md-input-container>
</div>
</div>
</div>
I can't figure out why it would overflow, and so I'm not really clear on why the two fixes work. Can anyone explain why this isn't working as written, or propose a better way to avoid the problem?
Update: I found this is a known issue on the github site, but there is no good resolution there.
Update 2: I found the max-width solution doesn't help in IE11.
I am using Primefaces 2.3.0 and JSF2.0.
I like the html output that Primefaces p:messages gives me. But I due to existing design, I would like to create the html without needing the to add the messages using FacesContext.getCurrentInstance().addMessage.
Essentially, I would like to do something like this:
<p:messages value="test"/>
I realize probably would not use p:messages but an existing tags that just outputs something very similar to what p:messages outputs.
I am hoping there is maybe another component that p:messages is using.
Thanks for any ideas.
The most minimalistic example I've found that looks exactly the same using my theme is:
<div class="ui-message-error">
<span class="ui-message-error-icon"/>
<span class="ui-message-error-detail">test</span>
</div>
I've removed classes ui-widget ui-corner-all from div, because I don't use rounded corners etc., but if it makes a difference in your case, well, the example would be a bit longer.
You can now use the StaticMessage component
<p:staticMessage severity="info" summary="INFO!" detail="Hey, i'm a info!" />
See https://www.primefaces.org/showcase/ui/message/staticMessage.xhtml