I have a long tabBar which is horizontal scrollable , I want the selected tab to align at left most side. For example if I select the middle the tab it should be visible at the left most side. And I have next and previous buttons to select the next and previous tabs. So if any tab right to the Left most tab is selected by clicking the prev button now it should be visible at left most side. Overall i want the selected tab to be visible at left most side.
Any help would be greatly appreciated.
I worked around it and got a solution a little trick in the activeitemchange of the tabpanel will do the task
TabPanelActiveItemChange: function (container, value, oldValue, eOpts) {
var count = container.innerItems.length;
var currentIndex = Ext.Array.indexOf(container.innerItems, value);
var tabBar = container.getTabBar();
// to keep the selected item in left or visible in smaller width screen.
var totalWidth = container.innerItems[count - 1].tab.element.getX() - container.innerItems[0].tab.element.getX() + container.innerItems[count - 1].tab.element.getWidth();
if (totalWidth > window.innerWidth) {
var widthToScroll = container.innerItems[currentIndex].tab.element.getX() - container.innerItems[0].tab.element.getX();
var scroller = tabBar.getScrollable().getScroller();
scroller.scrollTo(widthToScroll, 0, true);
}
Easiest if you have a fix size of tabButtons.
That way you could calculate on how much you have to scroll to the side.
A good start will be to set the tabBar.setScrollable({direction:'horizontal'}).
But anyways. It seems bad design for phone's or tablets. You should come up with another idea.
Related
I see this kind of code in each tutorial that tries to recreate the AppStore layout:
...
let group = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.95), heightDimension: .absolute(300)), subitems: [item])
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPaging
...
The important part is that group fractional width < 1.0. So for this example, let's say we have 3 items in that horizontal group + some other sections, just like the AppStore. Now if I scroll horizontally to the 3rd item in that horizontal group, and then I scroll down vertically, then scroll back up, the result is always the same: now the second item is centered in that group, not the 3rd one that was centered when I started scrolling down.
I also noticed that there are some strange scrolling artifacts when scrolling that group horizontally: sometimes when I drag the first item left and release, it just jumps back into the center without animation. Or when I scroll to the last item and then try to scroll even more to the right, it just bounces back to the first item.
This is really strange, looks like a bug in the UICollectionViewCompositionalLayout implementation or a combination of this + iOS version. Did anyone encounter similar issues and maybe know a workaround? I see this happening for each type of paging.
Edit: I just learned that this problem is iOS 14 specific, I tested my app on iOS 13.7 simulator and it works correctly there.
I have the same issue with scrolling right on the last item it bounces back to the penultimate item.
In my case i can not scroll fully to the last item so i've tried to set negative trailing insets for the group and it worked:
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(55))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.75), heightDimension: .estimated(55 * 3 + 16))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitem: item, count: 3)
group.interItemSpacing = .fixed(.centi)
// Here
group.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: -view.bounds.width * 0.25)
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPaging
I use scrollviewer in my windows store application, but after calling SetHorizontalOffset function some times scrollviewer doesn't change horizontal scrolling. The same thing with vertical scrolling. Does anybody know how to work with it? May be scrollviewer scroll only for visibility for offset (I mean that if it's see that user can see offset its doesn't scroll at all)
It appears the ScrollViewer's offset lags by one frame.
If the below code is run every frame, diffPrevDesiredActual is always 0. That is to say, the value provided by ChangeView does not take affect immediately.
...
var scrollPosition = /*some new value*/;
MyScrollViewer.ChangeView(null, scrollPosition, null, true);
var current = MyScrollViewer.VerticalOffset;
var diffDesiredActual = scrollPosition - current;
var diffPrevDesiredActual = previous - current;
previous = scrollPosition;
...
private double previous;
If nothing on your screen is animating when you change the scroll offset, then it is possible the ScrollViewer won't show the new value until something triggers the draw of a new frame. To test this hypothesis, try adding an infinite animation (eg ProgressRing) to ensure frames are constantly being drawn.
I have a datable inside a tab. My application has a left pane and a center pane. Center pane displays the data table and left pane is used for browsing. My left pane is collapsible, but whenever I collapse my left pane the column width in datatables is not automatically re sized based on new width but when I click on any of the column headers it expands / collapse based on the new width. I am not sure how to fix this issue.
I tried using the below code, the table gets expanded properly but the columns are not getting expanded / collapsed unless I click the column headings.
function collapse () {
$("#"+elementId).css('width', '100%');
$("#"+elementId).datatable().fnAdjustColumnSizing();
} );
I figured out that we can use $.fn.dataTable.fnTables(true) to get all the table instances and then adjust the column size of each table.
something like below,
function onCollapse(e) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
for(var i=0;i<table.length;i++){
$(table[i]).dataTable().fnAdjustColumnSizing();
}
}
}
Thanks
Barani
Please take a look at my jsFiddle here
I am using jQuery Isotope plugin and I am having troubles using their itemPositionDataEnabled to be able to scroll from my clicked item to the top of whats currently visible in the browsers window.
With itemPositionDataEnabled I should be able to extract the x and y position of what ever item I'm requesting. However mine does nothing at all....
var $this = $(this),
scrollTop = $(window).scrollTop(),
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y,
distance = (itemPositionY - scrollTop);
$('html, body').stop().animate({
scrollTop: distance
}, 1000);
You have a plain and simple error in these two lines:
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y;
The second line should be:
itemPositionY = itemPosition.y;
Not sure if you're all the way there since it only seems to work on the way you want on the first click.
http://jsfiddle.net/EA8tM/90/
I am trying to scroll a panel using button tap, and the panel is scrolling as I want. But my problem is that,
After scroll end it back again to its initial position, doesn't stick to its new position.
Why this behavior and how can I get leave from this?
Code I used (working just fine)
var container = this.getDealdetails();
container.getScrollable().getScroller().scrollTo(x , y, true);
The scrollable container will scroll back if the scroll to position is greater than the height of the container.
This is best demonstrated with an example. Run this fiddle: http://www.senchafiddle.com/#8Qnt8
Make your browser window smaller in height and note how it behaves. Hope this makes sense.
var panel= Ext.getCmp('iObserveCreateRecords');
panel.getScrollable().getScroller().scrollTo(0, 0, true);
//iObserveCreateRecords is panel id