I'm using Material-UI component.
This one from git : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
My main problem is when i use the scroll button, that scroll too much ( i have lot of tabs, something like 20 tabs ). So when i click on scroll button, that scroll to the right a lot and i lose my active tab.
I have tried to check the code of Tabs.
I found the 2 function i have to override.
These functions are inside that js code:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tabs/Tabs.js
var handleStartScrollClick = function handleStartScrollClick() {
moveTabsScroll(-tabsRef.current[clientSize]);
};
var handleEndScrollClick = function handleEndScrollClick() {
moveTabsScroll(tabsRef.current[clientSize]);
};
If i modify it on node_modules directy that work well, here an exemple :
var handleStartScrollClick = function handleStartScrollClick() {
moveTabsScroll(-tabsRef.current[clientSize]/10);
};
var handleEndScrollClick = function handleEndScrollClick() {
moveTabsScroll(tabsRef.current[clientSize]/10);
};
So now when i click on scroll button i have good result, it's scrolling step by step. But i can't directly overide into node_modules.
How can i do to do it correctly & properly please ?
Related
I'm working on a page fetching data and then showing a list of results. I have a main App component with a navbar and 3 possible sub-pages. The first is the home, where you can also do a research as i mentioned. When you do that, i made it so that the beginning of the list scrolls to the top of the browser window (banner, navbar and such get out of the screen, on the top). Now, if you click one of the results, you get to a detailed page about that.
What i'm trying to achieve is to call the page scroll i mentioned also when you get back to the home, by using "previous page" button or even by clicking home in the navbar. The results list is still there, so i want to scroll it again on the top.
The function i use for the scroll is
const scrollPage = () => {
setTimeout(function () {
const element = document.getElementById("comment");
element.scrollIntoView({
behavior: "smooth",
block: "start",
});
}, 1000); }
and this works when i do the research, since i call it inside the search function. i tried calling the same function with useEffect() but it didn't work, also i tried like
useEffect(() => {
window.addEventListener('load', scrollPage);
return () => {
window.removeEventListener('load', scrollPage);
}}, []);
but it doesn't work. if i click home in the navbar it goes on top of the page and if i use the "previous page" button i get back at the same Y of the list and the beginning of the list doesn't get scrolled.
I'm using the autocomplete editor of HOT, but needed to have my own template of the option-list. I've been able to accomplish that, by removing the default display and replacing it with my own while doing a lazy load of its content. But I need to perform specific tasks on each of the options being clicked.
The issue is that I cannot find a way to have my <a ng-click='doSomething()'> or <a onclick = 'doSomething()'> tags to find my "doSomething" function.
I've tried the extend prototype of the autocomplete instance, have put my function out there on my controller to no avail. Is there any way I can insert a delegate function inside this editor that could be triggered from inside my custom-made template? (Using angularjs, HOT version 0.34)
Dropdown options cannot interpret HTML instead of Headers.
To perform action when an option is selected you can use Handsontable callback : AfterChange or BeforeChange
Here you can find all HOT callbacks https://docs.handsontable.com/0.34.0/tutorial-using-callbacks.html
This JSFiddle can help you http://jsfiddle.net/fsvakoLa/
beforeChange: function(source, changes){
console.log(source, changes)
},
afterChange: function(source, changes){
console.log(source, changes);
if(!source) return;
if(source[0][1] == 0){//if ocurs on col 0
let newsource = optionsWBS[source[0][3]];
cols[1] = {
type : 'dropdown',
source: newsource,
strict: false
};
hot.updateSettings({columns: cols});
hot.render();
};
}
Thanks, I actually needed actions specific to each area being clicked. What I did to make it work was this: while inserting the items for the list, I created the element and bound it to the function right away: liElement = document.createElement('li') .... liElement.onclick = doSomething(){} .... got it working this way ..
I am new with protractor and I am facing some issues with mouse events. I am trying to hover over one of the ng-repeat items and then click on one of the menu options that they appear on top of each one of them on mouse over.
What I tried to do is:
var list-element= element.all(by.repeater('element in list'));
list-element.getText().then(function (value) {
browser.actions().mouseMove(value[0]).perform();
});
element.all(by.css('i.icon.x.blue')).then(function(menu-item) { `
element(menu-item[0]).click();
});
seems like hovering is not recognized and the element to click on cannot be found.
You should not be using getText().
From what I understand, you should be using something like this:
var list-element = element.all(by.repeater('element in list')).first();
browser.actions().mouseMove(list-element).perform();
list-element.all(by.css('i.icon.x.blue')).first();
Using Wijmo Open ComponentOne's Dropdown, I tried to place it in a registration form that displays when a button is clicked. This form is inside a jquery modal window.
The problem is that it is not displayed like a wijdropdown inside the form.
I supposed that since is was hidden, then it wasn't part of the DOM and so I added a method in the callback of the function that displayed the modal window; when the modal window finishes displaying, then call the .wijdropdown() on the element. However, it didn't work.
In conclusion: the select tag is not being wijdropdowned...
¿Any recommendations?
Script
$(function() {
// show overlay
$('#product-slideshow-overlay-trigger').live('click', function() {
var $registerOverlay = $('#product-slideshow-overlay');
//left position
var positionLeft = ($(window).width() - $registerOverlay.width())/2;
$registerOverlay.css({'left':positionLeft});
//show mask
$('#mask').fadeIn();
$registerOverlay.slideDown(function()
{
console.log("Started");
/**Add WijmoDropdown***/
$('#estado').wijdropdown(function()
{
console.log("Did the wijdropdown");
});
console.log("Ended");
});
return false
});
}); // end document ready function
Refresh the wijdropdown when the dropdown is not hidden:
$('.wijmo_drp').wijdropdown("refresh");
or
Find the wijmo component and check if it's visible or not (styled or not).
And trigger the visiblity changed event when you display the modal window.
if($('.wijmo-wijobserver-visibility').is(':visible'))
{
$('.wijmo-wijobserver-visibility').trigger("wijmovisibilitychanged");
}
I have an MVC app which has a Tab Panel rendered as the only item in the viewport. Within the tabs I would like to put the same type of component, for which the event handling is equal within all tabs.
Therefore I need an ExtJS MVC Controller ref to the active tab, that would lead me to execute events on the components in the active tab. Is it possible to have such a ref?
My current approach is this:
get reference to Tab Panel
call getActiveTab()
call the controller events for the component in active tab
Is it possible to encapsulate the above 3 steps in one controller ref? Would be beautiful :-)
I'm using ExtJS 4.1.
Personally, I think controller refs are overrated. This sounds like a simple case where you can use one as you describe, but I prefer to listen to the event, and navigate from the firing component to the one I need.
In your case, assuming your tab panel contains regular ext panels, I'd do something like the following:
onButtonClick: function (button) {
var panel = button.up('panel[tab]');
if (panel) {
panel.someMethod();
}
}
The up method will find the closest ancestor that is of xtype panel and has a property named tab. If you have more specific xtypes or known properties, use those instead.
The panel should be the active one (else how was its button clicked?) but you can check that by going up another level to the tab panel and getting the activeTab there.
onButtonClick: function (button) {
var panel = button.up('panel[tab]'),
tabPanel = button.up('tabpanel'),
activeTab = tabPanel && tabPanel.getActiveTab();
if (panel && panel === activeTab) {
panel.someMethod();
}
}
Say your tabPanel has itemId: 'content'. Inside that panel you will have bunch of tabs and on each tab you will have bunch of buttons (as an example). And you want to handle all these button's click in one controller. Do I understand you correctly?
I believe that simple ref inside your controller would work:
this.control('#content button', {
click: this.buttonClicked
}
});