I have a page with a huge tree component (scrollable) and an edit component where I can edit the selected node. After I edit the selected node in the edit window, I have an ajax event that updates the tree component.
My problem is that the tree updates 100% but the selected node is now scrolled out of view. How can I scroll back to the selected node. Or is there a way to update just the selected node in the tree instead of updating the tree completely?
If the treenode is still selected you could try calling this after the edit
document.getElementsByClassName("ui-treenode-selected")[0].scrollIntoView()
I encountered exactly the same situation, here's my solution, based on JavaScript:
$('.scrollable-tree-container').each(function(index) {
var position = $(this).find('.ui-state-highlight').position();
if (typeof position != 'undefined') {
$(this).scrollTop(position.top + $(this).scrollTop() - 300);
}
});
How does it work?
Specify the container providing the scroll bar
Look for a highlighted node
Read its position and scroll there
You might want to add additional selectors to avoid side effects on other components. I've subtracted 300px here since I had a total tree height of 800px. This way, the selected node will be somewhere in the middle (and not on top).
The undefined check is only necessary if you cannot asure that there's always one node selected when calling the function.
Related
I would like to align a component initially relative to the visible part of the containing parent (Container). The containing parent is planned to be a scrollable Tabs page but only that component should be visible initially on the page when selecting the tab.
In my example I want to position a Container (variable: root) at the bottom of the visible area of its parent. My current approach is to get the height of root and the height of root.getParent() and then set its top-margin as: root.getUnselectedStyle().setMarginTop(parentsHeight - rootsHeight);, but the result is not as expected. How can I manage this?
check the illustrations below:
intention
result
Note: when I add the root component programmatically then my approach works!
finally I could detect the cause of the problem. The descirbed approach is correct, but I also had to pay attention for a specific point! Beneath the taps bar I have an additional component by default which gets hidden when initializing the containig form. Thus parentsHeight is lower than expected because I missed to revalidate the containing layout.
I'm writing a Primefaces 5.1 portlet.
It consists in a unique page containing a panelMenu, and I need that it starts with any panel collapsed everytime a user change page (on page loading).
But, if I open a panel, then change page, it will start showing that panel still opened.
I wasn't able to find any option to achieve this goal (e.g. collapsed=true, ignoreCookie=true or something similar).
The only solution I found was the following Javascript code:
PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);
The problem is that this code will collapse any opened panel (so on page loading user is able to see panel menu collapsing animation) but it seems it doesn't store this state in its cookie/localstorage... the result is that on any page loading user can see this animation.
I'm sure it doesn't save its state, because the only way to "solve" the problem is to manually re-open and re-collapse the panels... then, on following page change, these menus start closed (and there is no animation).
I also tried to use PrimeFaces.widgets.sideMenuPanel.saveState() after collapsing, but with no success.
Do you have any idea about?
Thank you...
I found a solution to the problem.
If you read my discussion with Kukeltje (comments on my question), you will find that latest Primefaces' versions will solve the problem.
Otherwise, if you want to avoid upgrade or modify sources, and you need a quick fix based on Javascript only please read the following part of the answer.
It directly works on the component's state using JavaScript.
First of all you need to have a variable reference to your component:
<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />
Then you should add the following JS code on document ready:
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
// following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
//clearSidePanelMenuPreferences();
// 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
// We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});
The function called to clear preferences are the following:
function clearSidePanelMenuPreferences() {
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState(); // store this information
}
Hope it helps
Please check this block of code
PF('myPanelMenu').headers.each(
function(){
var header = jQuery(this);
PF('myPanelMenu').collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
);
I prefer to do this in order to execute this method only once and keep the menu option selected.
$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState();
}
});
I used an ice:dataTable component to display data, somehow there was a default onscroll event in the target div which doesn't make any sense to me and it had brought some positioning problems to other float elements within the page. I want to disable this action, but I didn't find any approach to control this.
It called the function below:
var input = document.getElementById('targetId'); clearTimeout(ice.pid);
ice.pid = setTimeout(function() {
input.value =
document.getElementById('targetId_scroll').scrollTop;
window.iceSubmitPartial(null, input, event);
}, 400);
I had a similar problem with ICEFaces and as we upgraded the JSF and ICEFaces versions the best solution was to change the tags:
ice:dataTable tag to ace:dataTable and the columns inside from ice:column to ace:column.
But, if you didn't upgrade ICEFaces version, I guess you could use a JavaScript or jQuery in some point of your code removing the onscroll attribute, like:
document._getElementsByXPath("//div[contains(#onscroll,'scroll')]")[0].removeAttribute("onscroll")
This one isn't a good one, just a example, cause you can remove scroll from other tables.
jQuery('.myClass div[id$="_scroll"]')[0].removeAttribute("onscroll")
One major difference that I have noticed between ExtJS 3.x and 4.x is how the rendering/layout calculation is handled for components that are rendered inside of a containing element that has display:none (NOT an Ext created/monitored containing element). In 3.x, upon showing the containing element, the Ext component it contained would be properly rendered and sized to whatever dimensions i set for it.
However, in 4.x, that same component will not be displayed at all and have a zero height and width when its containing element was shown. After it was visible if I do a call to .setSize() it would then properly be displayed. Problem is, in my application there is just no way to be able to go through all the events that could cause a hidden component to be shown, and add code to make sure its layout is manually forced to be recalculated.
So my question is, is there any way to get back 3.x's behavior in this situation for all components across the board in 4.x?
What you can try to do is set up listeners on your components that delegate to the underlying DOM elements, perhaps that will solve your issue.
However my suggestion is if at all possible is to use the framework to manage the entire page layout using Viewport. You can still suck in the HTML (if you must) and render it inside containers or panels for example. Perfect use case here is Header and Footer which are generated by server side code (jsp, gsp, asp..) and then displayed in the North or South regions of the Viewport using contentEl : 'myDivId' configuration.
I need to show the only component on the form - HTMLComponent. Reaching the bottom of the form/component while vertical scrolling scroll bar jumps back to the top of the form. I need to prevent this.
I've tried to turn on/off scrolling on the form and HTMLComponent but anyway if there's a scroll bar - it will return to the top from the bottom. Also I've tried border and box layouts and additional container for HTMLComponent - no use.
Any ideas how to prevent such scrolling issue?
Try this (it works for me - LWUIT 1.5):
htmlComponent.getComponentForm().setCyclicFocus(false);
If you get a NullPointerException, call it after adding to the HtmlComponent to a form.
If you want to get rid of the bottom/top jump scroll, you can use
form.setCyclicFocus(false)
You should stick with border layout and place the HTML component in the center for this particular use case. You can disable form scrolling since the HTML component is indeed scrollable by default:
form.setScrollable(false);
HTMLComponent is itself scrollable
to prevent scrolling
setScrollable(false);
for horizontal scroll off
setScrollableX(false);
hope this will solve your issue
...or, you can paste this code on your Form class
public void keyPressed(int keyCode) {
int tecla = Display.getInstance().getGameAction(keyCode);
if(tecla == 8){
//if hit ENTER or principal key in mobile keyboard
}else if(tecla == 6){//down key
if(this.list_component_name.getSelectedIndex() < this.list_component_name.size() - 1)
this.list_component_name.setSelectedIndex(this.lista_bodegas.getSelectedIndex() + 1);
}else if(tecla == 1){//up key
if(this.list_component_name.getSelectedIndex() > 0)
this.list_component_name.setSelectedIndex(this.list_component_name.getSelectedIndex() - 1);
}
}
That's also work for me
form.serScrollable(false) or form.setCyclicFocus(false) didn't work for me.
I have a form and just a single HTMLComponent in it.
The problem is in HTMLComponent itself and disabling focus of the form won't affect it.
You can try with making the whole component focusable which might help in scrolling in a proper way. Along with this you should add your html component in Boderlayout.center of form and make form scrollable true and cyclic focus false.
In LWUITImplementation we have function getDragPathTime(). This javaDoc about this function:
/**
* Indicates what drag points are valid for the drag speed calculation.
* Points that are older then the current time - the path time are ignored
*
* #return the relevance time per point
*/
I also was problem especially in devices with OS S-60 Nokia. Lists was jumped from buttom to top. i solved this problem by change the return value. I change the value to 600( from 200). this occurs to fewer sampling and prevent the "jump".