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.
Related
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
Trying to get a code generated by Crowdriff to display a gallery on a page and it is being blocked with css that I am not defining as display none. I'm not sure where this is coming from as I haven't set it anywhere to display none.
Screenshot of problem
Here is the page where it should be showing:
https://www.orillialakecountry.ca/test-gallery/
Script tags are never displayed. These are used to import and execute javascript files.
In the javascript a HTML element is probably targeted in which it tries to inject it's HTML.
How can I change the heading sort icon in a APEX 5 classic report?
The customer just wants to have his own sort icons for desc and for asc. He does not like the new APEX sort icons.
ORACLE says:
Desupported Report Heading Sort Icons The following attributes used to
define the report heading sort icons have been de-supported for
interactive reports and classic reports: Ascending Image, Descending
Image, Asc Image Attributes, and Desc Image Attributes. Instead of
referencing images directly, Oracle Application Express now uses CSS
to render sort icons. For interactive reports uses the following
classes: .a-Icon.icon-irr-sort-asc and .a-Icon.icon-irr-sort-desc For
classic reports use the following classes: .a-Icon.icon-rpt-sort-asc
and .a-Icon.icon-rpt-sort-desc
I have no clear idea how that task can be made. I just know that APEX now uses CSS to render sort icons (a-Icon.icon-rpt-sort-asc and .a-Icon.icon-rpt-sort-desc).
It could be "Static Application Files" > #APP_IMAGES#sort_asc.png / #APP_IMAGES#sort_desc.png.
I am new with APEX, my colleagues say changing a sort icon in classic report was an easy task in APEX 4.2 but this easy way is no longer available in APEX 5.
Does someone has a piece of code and some hints?
You need to define your own CSS classes .icon-rpt-sort-asc and .icon-rpt-sort-desc. They have to look like this:
span.icon-rpt-sort-asc {
background-image: url("/i/custom_asc_sort_image.png");
}
span.icon-rpt-sort-desc {
background-image: url("/i/custom_desc_sort_image.png");
}
Here you set names of images, which will be shown in a report column header. After that you need to use this CSS. Here you have two ways to do this:
Open page properties, go to CSS tab, place CSS code there. This isn't a good way, because you have to add this code to every page, where you need custom images.
Recommended way - create a css file with code above, put it in /i/ folder, and change page template (Shared Components->User Interface->Templates-> desired page template -> Definition tab). In Header section add a <link> tag:
<head>
...
#PAGE_CSS#
#FAVICONS#
#HEAD#
<link rel="stylesheet" href="#APP_IMAGES#mycss.css" type="text/css"></link>
...
</head>
where mycss.css - name of your CSS file. And, of course, you have to put your custom sorting icons to apex images folder.
Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.
There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?
UPDATE
From Jost's answer was able to get my images displayed, but how do I split the image details?
My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.
Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example
tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.
Update
Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).
You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.
The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).
This post is a bit older but I want to add the following:
If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template.
You can find the setup.txt here:
typo3/sysext/css_styled_content/static/setup.txt
There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too.
But check to read the documentation and tutorials on typo3.org.
HTH
merzilla
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.