Trying to create an input field in my component where I have mat-toolbar element, unfortunately inserting a mat-form-field element changes the styling of the mat-toolbar.
I was not able to diagnose where the issue is coming from (maybe if you happen to find out it will be a good idea to explain how you did), nor how to overcome it.
Here is a stackblitz minified example. To make the bug appear - uncomment line 11 in /test-comp.component.html. Link to StackBlitz.
Note: I know a simple border can be used instead of border-box class but in the full-blown app it serves a different purpose that I can not replicate with a border.
You are using mat-form-field without any form field control, and hence the issue. You can try adding any form field control and it will work. As an example, we can add <input> element along with matInput directive as:
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
We also would have to import appropriate module in app.module.ts:
import { MatInputModule } from '#angular/material/input';
...
imports: [
...
MatInputModule
]
I was not able to diagnose where the issue is coming from (maybe if you happen to find out it will be a good idea to explain how you did), nor how to overcome it.
I went to Stackblitz, uncommented the line and was surprised with the output. Since I haven't used Angular Material Components, I tried to investigate styles within Devtool Elements tab. I didn't saw anything wrong with the styles. I opened the console and there it was:
Error: mat-form-field must contain a MatFormFieldControl.
That gave me the clue that mat-form-field should have some kind of form control within it. I went to the docs, and found this:
This error occurs when you have not added a form field control to your form field. If your form field contains a native or <textarea> element, make sure you've added the matInput directive to it and have imported MatInputModule. Other components that can act as a form field control include <mat-select>, <mat-chip-list>, and any custom form field controls you've created.
PS: I was also able to see below warning in console. So you may need to add theme too.
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Related
Is there an error box in Ionic which can be used to display messages/error with the content.
I am not looking for an alert box that pops up.
Here is an example of what I am looking for.
Personally I think that this should be part of Ionic and not have be implemented using CSS.
Thanks
There currently is no existing ionic component specified for errors.
For that, you have to customize it yourself. The error display you've shown in your example is nothing but a text field (ion-label) whose class is customized.
Here's an example:
<ion-label class="label error-label">Error Text</ion-label>
and then in a different SCSS file you would code for that class.
Hi I have implemented auto search option in Angular 2 using primeng. I have found reference in https://www.primefaces.org/primeng/#/autocomplete site. when I implement same code in my project I do not see suggestions filling in drop-down box list. I have added screenshot below.
Below is my code.
<p-autoComplete autofocus name="username" [(ngModel)]="username" [suggestions]="filteredUsernamesSingle"(completeMethod)="filterUsernameSingle($event)" field="userName" [size]="30"
placeholder="Enter UserName" [minLength]="3" required></p-autoComplete>
In reference website when user tries to search some test, everything comes in dro-down list. But when I implement I am not getting any drop-down list as I shown in above image. Can someone help me where can I add styles to make suggestions come in drop-down box list?
I had the same problem. I was passing a string[] array into [suggestions]. After examining their example it started working after I started passing an array of objects instead. Apparently the autocomplete component expects an object with a property specified in the field directive, otherwise it can't reach the value and format it properly. Try passing it an object with a userName property, since in the HTML you specified field="userName".
Check the documentation page primefaces getting started. You'll see instructions to add the primeng css and primeicons and a theme css file that you will use as the theme for your site, to the project's angular.js file. This will work like <link rel="stylesheet" href="styles.css" /> embedding of external css files to a web page.
Is there any sort of easy way or helper that would enable to functionality to set custom variable flags. For example I could set a color variable to "blue" in the editor and I could use handlebars to add the "blue" class an element in that post.
EDIT: I ended up having to use a different CMS. Ghost was made intentionally to be simple and my needs require more customization features.
This is something I have been trying to figure out, but (being new to ghost), I haven't found a clean way to do this. Unlike Wordpress, there is no field for this in the editor (I have checked the documentation, nothing similar), so you have to apply some custom solution. Here are two options:
If the styling you want to apply depends on a tag, e.g. if 'movie'-tagged posts need some special styling, you can just add CSS because the {{body_class}} helper adds all the tags to the <body> element as tag-classname, e.g. tag-movie.
If tags are not your option, you could use client side JavaScript, check some condition in the content and apply the styling. I use this to change color of an svg logo when it is placed on a hero image that happens to have the same color as the logo. This requires the hero image of the post to follow some url convention, like post-heroimg3663-blue.jpg. Then you can add some inline Javascript to the <head> to change the color of the logo. Not so good, but it should work.
UPDATE:
If the second option works for you, you could even consider creating a Handlebars custom helper and running any styling (via adding a class) on the server side.
I use accounts-password in my meteor web-app, but only on two pages, where I include the usual {{> loginButtons }} code.
But a permanent hidden (display: none) modal with a title of 'Reset your Password' appears in the source just below the body tag, on every page. In other words it's in my layout, as a permanent part of my single page app, and I didn't put it there. It's appeared by itself, above the first piece of code in my layout, right below the <body> tag.
If I change the css display attribute to 'block', this is what appears:
No code of mine includes this modal, so I have no idea why it's there, and I would like to remove it, if possible.
As stated above, I do use accounts-password on a couple of pages, but so far I have used all the defaults, I haven't tailored the package in any way.
Can anybody shed any light on this?
This modal is declared in the accounts-ui-unstyled package which is a dependance of accounts-ui you're probably using.
Packages have the ability to declare global scoped templates and might include them on your behalf or when including a package-declared template such as {{> loginButtons}}, it's not a bug, it's a feature :)
I would recommend you leave the modal as it is, after all it's hidden by CSS and won't interfere with your normal app flow.
You may want to use another user accounts UI package such as useraccounts.
You could also come up with your own accounts-ui behavior, drop the standard package and no longer use {{> loginButtons}}, but think twice : is it worth the trade ?
In Tridion 2011 ( with UI 2012) I have a component with a field that is a list of Component Links. I'd like to enable inline editing on one of the fields that is being brought in via the Component Link. Is this possible?
I was able to enable inline editing for other non-Component Link fields, but the CL's seem to be an issue. I first tried the tcdl syntax, but that did not generate working SiteEdit Component Field markup. Finally I tried to edit the Start Component Field comment on the page to see if I could find a working syntax, but didn't come up with anything that worked.
Any ideas?
Nick's solution calling RenderComponentPresentation on your linked Components should work fine. Calling RenderComponentPresentations for linked Components should in general be considered a good practice, since you are after all rendering another Component Presentation.
But if you want to take control over the exact tags that are generated, you can do that too. When I needed that level of control, I created some custom functions that output the comments directly instead of fiddling with tcdl.
A DWT snippet that uses these functions:
<div class="ContentArea">
<div class="ContentFull">
##MarkComponentPresentation()##
<h1>##MarkComponentField('Title')####Component.Fields.Title##</h1>
<div>##MarkComponentField('Image')##<img src="##Image.ID##"/></div>
<div class="FullDescription">
<div class="FullDescriptionText">##MarkComponentField('Description')####Component.Fields.Description##</div>
</div>
...
So this uses MarkXxx instead of the regular RenderXxx to output just the comments.
You can find the code for these functions on the Tridion Practice wiki on Google code:
http://code.google.com/p/tridion-practice/wiki/TridionUI2012FunctionsForUseInHtmlTemplates
If you render this linked component using ##RenderComponentPresentation(componentTcmId, comonentTemplateId)## then the Enable Inline Editing for Components TBB will add the proper UI tags and you'll be able to edit your nested component.
The approach you've tried to render the Inline Editing commands manually should work. I suspect that the reason it did not work for you is because of some syntax error or invalid/missing parameter values.
If you share your entire rendered HTML document we may be able to help further.