I want a add a particular style to a frozenLeft ngx datatable column upon scroll. So far what I have achieved is triggering a function call on scroll and setting a flag to true to indicate that the style should be applied.
onScroll(event){
if(event.offsetX > 0){
this.flag=true;
}
}
But, in ng-datatable column [ngClass]="{'custom-style': flag}" is not working (class is not getting appended to the element).
Also tried [cellClass] I am not able to figure out how to use [cellClass]="getClass" to trigger the change whenever I scroll.
Your help is appreciated.
You can use condition in the ngClass and apply the class based on it:
<div [ngClass]="flag ? 'applyStyle' : 'noStyle'"> </div>
If this doesn't work, there might be an issue with view encapsulation. You need to remove it. You should check this thread, it explains how to do that in simple steps.
Also, make sure your change detection strategy is set to default or make change detection if it is OnPush which will update the view properties.
Related
I am experiencing the strangest issue. I do have a component that's style is controlled by some object it's handling. As the object is manipulated (by some inner component click), the whole view collapses to a height of 0.
I have tried to apply the view changes via ngStyle, ngClass, plain ol'javascript - but nothing ever worked. Second strange thing - handling outer component's component styles is perfectly working.
Object
const valueMap = {
width: '100%',
...
}
Pseudo Component Tree
<component-a>
<component-b [ngStyle]="{'width': valueMap.width} [valueMap]="valueMap">
<div (click)="changePosition()">Button</div>
</component-b>
</component-a>
Method
changePosition() {
this.valueMap.width = this.valueMap.width==='100%' ? '50%' : '100%';
}
I would really expect the component-b to collapse to a width of 50%, but not having the height collapse to zero. I can see in the code, that as I click the button the style is applied to the element - and if in Chrome DevTools I deactivate the applied style and activate it again, it is showing properly. Never had something like this. Can someone please help?
Thanks in advance. André
I tried to recreate your problem. altough i couldnt get the error you seem to be having, i think i can see the issue at hand:
from your html
<component-a>
<component-b [ngStyle]="{width: 'valueMap.width'} [valueMap]="valueMap">
<div (click)="changePosition()">Button</div>
</component-b>
</component-a>
i could get, that your "valueMap" is an Input() within component-b.
so i did that on my end aswell and declared valuemap on the outermost component (the one using component a and b)
i recreated your html and found parsing errors and whatnot until i realized something:
<app-collapse-on-click>
<app-collapse-child [ngStyle]="{'width': valueMap.width, 'background-color': 'rebeccapurple'}" [valueMap]="valueMap">
<div><button (click)="changePosition()">Button</button></div>
</app-collapse-child>
</app-collapse-on-click>
when using ngStyle, the style is interpreted as an object. meaning, in your case you need to remove the ' arround valueMap.width and add them to width.
i added the background color to get a visual result other than just the style html.
hope that somehow helps.
regards
Alan
When I use dynamic options, the second option looks strange when the script is run.
I've made a fiddle with the problem http://jsfiddle.net/niklasro/GqGGA/ but it won't run the script that should activate the dynamic option:
function cities(obj){
if(obj.value == '3'){
//undisplay cities options municipality_control2
document.getElementById('municipality_control').style.display='none'
}else{
$('#cities').load('/cities?regionId='+obj.value);
}
}
How can my problem be resolved?
The problem is a pseudo css class that jQuery adds a style called active and then forces it to behave. Because this is the active control it has the active styling. You can see it in your example if you click on the dropdowns.
If you force remove this styling with code like this http://jsfiddle.net/mGAs4/5/ it will go away. You can also add CSS to change what the active class does for this type of element.
Something like
select:active { background:white; }
I think this will also work
select.active { background:white; }
But I have not played around with jQuery's active support much.
I want to navigate from code to some place with slide:right transition for example.
app.navigate('#some_page')
That code use default page transition. How to change custom transition in code?
What about:
app.navigate(
'#some_page',
'slide:right' //or whichever transition you like
);
Cheers...
// edit: Changes object to parameters
Here is a piece of the documentation that you might be searching for.
http://docs.kendoui.com/getting-started/mobile/application/overview#reverse-transition
I have two lists in which using jQuery sortable i can move the items between them.
$( '#productsList, #orderList' )
.sortable({connectWith: '.containerDiv'})
.disableSelection();
However I run into a problem when i want to use custom scroll bar and set overflow:hidden; on the two lists. I want them to be with max-height:400px.
If i set overflow hidden i cant see the items after i drag them outside of one div, If i dont set hidden the list will have default scroll bar.
Can anyone suggest a solution.
thanks
If you remove the style position:relative from your lists is seems to work as you want it to.
http://jsfiddle.net/cCDcQ/2/
Edit:
I would have thought that using the appendTo option would fix this issue and I was right. After a bit more fiddling, I got it to work. This way, you can keep the position:relative if you need it.
http://jsfiddle.net/cCDcQ/4/
I know this ticket is somewhat dated, but I had ran into the same issue while using my custom scrollbar solution and attempting to drag between Sortable's with overflow hidden. After adding code to fix-up Sortable to work with my Scrollpane, I noticed what appeared to be an omission for the appendTo functionality.
The code for appendTo only appends the helper to the target if it doesn't exist in the DOM. That's why the clone options works for some (but not for all and I won't go into that here). The key to fixing it was to add this code toward the end of the _mouseStart function of the widget:
if (!this.helper.parent().is(this.appendTo)) {
this.helper.detach().appendTo(this.appendTo);
// update position
this.offset.parent = this._getParentOffset();
}
Note that this.appendTo is set-up earlier in the function:
this.appendTo = $( o.appendTo !== "parent" ?
o.appendTo :
this.currentItem.parent() );
With this fix in place, I specified an appendTo that targeted the div that contained both Sortable's and ceased to have the overflow issue.
The complete fix-up, including other flow fixes, is available in the scrollsortable JS file for the jQuery-UI-ScrollPane available here: https://github.com/borgboyone/jQuery-UI-ScrollPane.
Cheers!
I am developing an application using ExtJS.
I have an Accordion and need to select an active item(so it expands).
Accordion.setActiveItem outputs the following:
"setActiveItem" is not a function in a browser's error window.
Second issue is that hideCollapseTool property, when set to true in the initialisation, doesn't do anything. Collapse tools still are being displayed.
I am using ExtJS 3.1.1.
I would be very thankful for any tips and answers.
I have had little luck with setActiveItem myself. Examining it in Firebug, the accordion panel doesn't even have that method.
What I did to get around it was to call expand() on the item I want to have focus,
e.g. :
accordion.items.itemAt(2).expand();
You can also expand some item in an accordion panel by it's component id like this:
Ext.getCmp('myAccordion').expand();
Ext.getCmp('myAccordion').items.key('myAccordionPanel').expand();
I fixed it in a controller with a ref called userview
this.getUserview().items.items[1].expand();
Ext.getCmp('myAccordion').getLayout().setActiveItem(0); // First Child
Ext.getCmp('myAccordion').getLayout().setActiveItem(1); // 2nd Child and so on
I spent a good 6 hours wrestling with this. collapse() and expand() didn't seem to be working. I'd expand a panel under the accordion and other panels would break.
Finally figured out there is some issue that happens if your accordion is hidden and then you show() it right before collapse() and expand() operations on the sub-panels.
My workaround was to never set the accordion to "hidden=true" and never show() it. Instead, I used style={opacity:0} to begin and then set opacity:100 when I needed to see it. This fixed everything, but isn't the most graceful solution.