Working with PrimeNg with the current version 8.0.2 I'm experiencing layout problems with the searchbox inside a listbox. Apparently this was resolved in 3077.
I've created a stackblitz example so you can see it.
The html code is:
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px', 'width':'300px'}">
<p-header>
Cities
</p-header>
</p-listbox>
Is the bug back? Am I missing something?
Thanks for your help!
As seen in the documentation, the problem is mixing the properties [style] and [listStyle].
style - Inline style of the container.
styleClass - Style class of the container.
listStyle - Inline style of the list element
.
So the inline style should be splited in 2 different attributes:
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"
[listStyle]="{'max-height':'150px'}"
[style]="{'width':'300px'}">
<p-header>
Cities
</p-header>
</p-listbox>
Related
On button click an NgbModal modal box will be loaded. The modal is having an ag-grid-angular component.
This grid have a date picker column. I am using primeng date picker.
HTML code for calendar display.
<p-calendar class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
</p-calendar>
The problem here is that the date picker calendar is always hidden inside the grid. like this.
How can I solve this.
This can be solved, by looking at the CSS property overflow of the CSS class .ag-root-wrapper.
This class is declared on the <ag-grid-angular> directive (see screenshot).
The solution for me was to include an overwrite of the overflow property in the css of the component that includes the <ag-grid-angular> directive. (The component where I include ag-grid on my html).
// Put this on the component that includes ag-grid
::ng-deep .ag-root-wrapper {
overflow: visible;
}
The following Stack Overflow Post helped me to identify the solution.
Add appendTo="body" like this:
<p-calendar appendTo="body" class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
</p-calendar>
The issue here is that the calendar popup is being clipped by the container. This is a common issue when using date pickers.
To solve this you need to set the popup element to the document body, the simplest solution for you would be to add [appendTo]="'body'" to your calendar component, this is a property which exists on the API of the primeng-calendar.
See this blog for more details on the implementation, as it has an example using primeng and ag-grid with angular: https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/#appending-body
I am using primeNG calendar and whenever the calendar opens under the input box it is behind all the other html elements. But when it opens above the input box everything is ok.
I fixed it by using appendTo="body" in the p-calendar html element.
Here is how the html element looks like now:
<p-calendar appendTo="body" [locale]="dk" placeholder="Inklusion dato" [(ngModel)]="patient.inclusionDate" showButtonBar="true"
readonlyInput="true" [showIcon]="true"></p-calendar>
In my case works well. Just add inline CSS of
<p-calendar [(ngModel)]="dateTo" [disabledDays]="[0,6]" (onSelect)="doOnSelect($event)" [showIcon]="true" [style]="{'overflow': 'visible', 'z-index': '9999','opacity':'1'}"></p-calendar>
Inline only work instead of working in style.css.
I'm trying to implement ng2-completer component in my Angular2 application.
The conponent works properly but the style of the search textbox is flat...
I want to have the same style of bootstrap components, like textbox for example.
This is the code:
<ng2-completer [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
This is the rendered control:
As you can see, the list of color is ok but the input where the user write the value to search is completely flat...
How can I move to fix the problem ?
Basically I just want to set it like the field "Titolo" on the right.
Thanks
Just add [inputClass]="['form-control']" in the selector.
For example:
<ng2-completer [inputClass]="['form-control']" [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
Note: form-control is here a class of Bootstrap
put class="form-control" to your textbox ,(class)="form-control" in your case i guess
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.
I have a component inside a form:
<a:form id="myform">
<a:somecomponent id="comp">
</a:form>
and a huge css file, which attaches some style to the component with id "comp".
However, this does not work, as in the rendered html page, the components name becomes "myform:comp".
How can I prevent this? Using myform:comp in css does not seem to work :-(
You have to add prependId="false" to form tag.
<a:form id="myform" prependId="false">
<a:somecomponent id="comp">
</a:form>
You just need to use the richfaces functions detailed here. #{rich:clientId(‘comp’)} can be used in this case.
Edit: also see this answer
The best solution I found up till now is not to use the id, but the style class, and replace all of the occurences of #comp in the css file with .comp:
<a:form id="myform">
<a:somecomponent styleClass="comp">
</a:form>
However, I don't consider this as a 'clean' solution...