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.
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
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>
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.
Textareas are great because of some built in functionality (scrollbars). How can I format <spans> of text inside of the <textarea>?
If you need to customize your textarea, reproduce its behavior using another element (like a DIV) with the contenteditable attribute.
It's more customizable, and a more modern approach, textarea is just for plain text content, not for rich content.
<div id="fake_textarea" contenteditable></div>
The scrollbars can be reproduced with the CSS overflow property.
You can use this fake textarea in a form normally, i.e: if you have to submit its content through POST method, you could do something like(with jQuery):
<input type="hidden" id="fake_textarea_content" name="foobar">
...
$('#your_form').submit(function()
{
$('#fake_textarea_content').val($('#fake_textarea').html());
});
You Can't style the content of a text area separately, you have to use <div>s, or something similar.
Do you Want Something like this:?
http://jsfiddle.net/mekwall/XNkDx/
$('.editable').each(function(){
this.contentEditable = true;
});
This allows you to edit the content of a div, and it will still look like a textarea,
Bold will now Work.
You cannot use HTML inside TEXTAREA.
Scrolling can be applied to any element by adding overflow: auto and fixed width and/or height.
You can user html editors for web like CKEditor to be able to format the data in text area. Check this http://ckeditor.com/
Another way to submit the "fake" text area is including the following lines inside the form tag
<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>