set horizontal ScrollView s height as indexed content height - javascript

I have a horizontal ScrollView inside another vertical Animated.ScrollView.
I am use the horizontal one as tab-view(snap item changing) and its working perfectly but there is a problem now.... I render different views inside each item of scroll view which has specified heights, ScrollView height will get the longest one and all of tab views get the same height despite they don't need such a long height:
<Animated.ScrollView>
<ScrollView //<<<<<<I'm talk about this one
ref={(scr) => this._scrollView = scr}
decelerationRate={0}
snapToInterval={Dimensions.get('window').width}
snapToAlignment={"center"}
pagingEnabled
horizontal <<<<<<<<<<
onContentSizeChange={() => this._scrollView.scrollTo({ x: this.state.index * Dimensions.get('window').width, y: 0, animated: true })}
onMomentumScrollEnd={(event) => this.focuser(event.nativeEvent.contentOffset.x)}
>
<View>...some thing short<View>
<View>..some thing Long<View> //<<<<this one is long
<View>...Some thing short<View>
</ScrollView>
As you see above, the item which I use in second tab has a long height and it stretch the whole height of ScrollView! its no problem now ... its appropriate stretching which I need for this item(this View) but, I don't need such a height for other tab. But they get this height and will able user to Scrolling down. its so ugly.
I want to set the height of ScrollView as the height of Current tab content(Current index content ). whats your solution for that ?

As far as I know, this is a limitation of ScrollView. As a workaround, you might want to try replacing your Views with vertical ScrollViews of fixed size on the page. This way they will all have their individual scrollable height. However, since you're already inside a vertical ScrollView, responding to scrolling events can get a bit tricky.
Update:
Another approach is to adjust the height of individual items based on their number, so that every page is the same length. You can see it in this example.

Related

Trouble Resizing Both Panes in react-split-pane

I have a horizontally split pane for one of my projects in React.js. I'm using react-split-pane to handle the resize logic. Each pane contains a table wrapped in a few other components.
The issue I'm having is getting the bottom pane to adjust its size to the leftover space within SplitPane. For example, if the total height of the container is 1000px and the top pane gets resized to 300px, I need the bottom pane to be 700px. I was able to resize the bottom pane to the same size of the top pane. How can I get the bottom pane to resize to the leftover space of the total container?
I have a simplified recreation of the problem in a Sandbox here
The second problem I'm having is that when I do resize with this new logic in place, it looks very choppy and lags quite a bit. You can't tell in the Sandbox, but in the actual project, it gets pretty bad. Is there a better way to solve this problem that makes the resizing more fluid? If so, how can I achieve this?
Thanks!
Is this what you are trying to achieve? Sandbox
I just added some logic in your toggleBtmHeight function to find out what the height of the bottom pane should be after resizing. When you resize the pane, the onChange callback passes you the height of the primary (top) pane. You need to use maxHeight - topPaneHeight = bottomPaneHeight to figure out what the height of the bottom pane should be:
toggleBtmHeight(topPaneHeight) {
const maxHeight = 1000;
const padding = 225;
const btmPaneHeight = maxHeight - topPaneHeight - padding;
this.setState({ btmHeight: btmPaneHeight + "px" });
}
As far as how to handle the choppiness, it's hard to say without seeing it in the full context of your app, but I would guess that when you update state it's re-rendering a bunch of components causing the lag. I would look into adding shouldComponentUpdate to your components to help manage when they should actually be re-rendered.

Set window scroll position to compensate for elements being removed from webpage?

I have a collection of react components that are rendered in react-stack-grid. As the user scrolls down the collection is populated using react-infinite-scroll-component, to limit the number of items in the collection I remove items from the list of components being rendered but when I do this the scroll position needs to be updated and move to compensate for the new elements.
Like so:
if (currentMediaItems.length > 40) {
currentMediaItems = currentMediaItems.splice(currentMediaItems.length - 40);
}
return <div style={style} >
<InfiniteScroll
next={this.fetchData.bind(this)}
hasMore={true}>
<StackGrid monitorImagesLoaded={true} gridRef={grid => this.grid = grid} columnWidth={this.props.columnwidth}>
{currentMediaItems}
</StackGrid>
</InfiniteScroll>
</div>;
When InfiniteScroll hits 'next' more items are loaded and the scrollbar position is adjusted to compensate so the window remains fixed in its current position.
However if I have more than 40 items to render and decide to remove all elements except the last 40 the scrollbar is not offset to keep the window fixed in the same relative position and instead stays at the bottom of the window.
How can I calculate the correct y scroll position based on the number of removed elements?
You can use plain JavaScript to set the window position:
window.scollTo(offsetX, offsetY);
Try to calculate the element height * element count and remove it from the current scroll offset.
You should also check out react-virtualized. This is ideal for a use case like yours to enable performant lists with a lot of items.

How can I make ExtJS treecolumn scroll horizontally only the content and not the header

Let's assume I have a tree grid with a single column, the treecolumn. The width of the panel is 200px, and when expanding, some records have a wider text than 200px. Currently, Ext will apply an ellipsis property on those cells. What I want to do is to show horizontal scrollbar in the bottom which will update at every expand/collapse event. To accomplish this I used column autoSize() function which increase the column size to fit the content and automatically show the scrollbar in the bottom. But, increasing the column width increase also the column header width, which I don't want. Is there a way to keep the header width at 200px and increase only the column content width, keeping the scrollbar in the bottom?
Thanks in advance!
Eventually I found a way, but as #Alexander suggests in his comment, I had to enter the Ext code and mess with it. In fact what I've done was to remove the horizontal scroll partner corresponding to header as follows:
var headerScroll = myTree.getDockedItems()[0].getScrollable();
mytree.getView().getScrollable().removePartner(headerScroll, "x");
removePartner() is a private function so I should not use it, but in this particular case I don't think will harass the rest of the code.

How do I take the scrollbar into account with viewport width units?

I am trying to develop a carousel similar to Netflix, but I cannot make it responsive. I have been using a codepen example:
Link to example
In this example, it has a hardcoded width and height. I would like to make it use a responsive measure (percentages). I wanted to use the vw viewport width units, but this doesn't work for me because it does not exclude the scrollbar. So, when I want every carousel item to have a width of 20vw (so that each one is 20% of the viewport size), they are always wider than I want because the viewport does not exclude the scrollbar.
How can I fix that problem?
I have made an example: Link
In this example, I want to show five items and showing an arrow on the right. The 6th item should be hidden behind the arrow, but the arrow width is not correct.
The width of every item is 18.4vw ( (100-8)/5=18.4). As you can see, I have put a padding on left and right with 4vw(so, I am subtracting 8 for total width), so, I have made the arrow layer with:
position:absolute;
right:0;
width:4vw;
In this manner, the arrow always is fixed to right.
The problem is that 18.4vw is the measure respect the viewport, and as there is a scrollbar, the width is not correct, because the scrollbar width is breaking the correct measure.
I dont know if you understand what I want to make.
BR.

Text wrap to columns

I have unlimited length of text, and a fixed height container with no vertical scrollbar option, basically the text overflow the container, but it is hidden.
The requirement is to wrap this text to same height columns like the parent container, container has the option to have horizontal scrollbar.
Al this need to work in responsive layout - what means the text parent container height will be less, and all text columns will be restructured.
E.g. if the current text columns was initial 3 column on smaller devices can go to 4, or 5 column.
I searched Google, but haven't found any possible solution.
Any solution, or guide will be big help - at least to know in which direction to start
CSS, or JavaScript, jQuery solutions are welcome.
Initial has the height auto - click button to set the height/ after the height is set need to wrap the text and set in columns to not exced vertical height, instead will be horizontal aligned columns.
ADD CODE HERE
jsfiddle sample
You can wrap your data in another div inside the opendoc and increase its width.
<div class="opendoc"> // width fixed Change Height
<div class="resizablediv"> // Change the width
{{Your data}}
</div>
</div>
I have an idea, but not really perfect. Such problems always need a lots of try/fail tests…
You need to have two nested elements:
<div class="opendoc">
<div class="opendoc-inside">
[Content]
</div>
</div>
.opendoc will receive a fixed height.
.opendoc-inside will have columns and fixed width;
depending of your device width, you choose a number of columns, I choos 2 for the exemple;
Now with javascript:
set columns 2 and width 100% on .opendoc-inside
if height of .opendoc-inside is greater than height of .opendoc:
add 1 column and 50% to the width of .opendoc-inside
goto 2
else your are ok
This solution generate a reflow on each test. this could become very slow.
You need to avoid to launch this operation on each resize event…
Found an jquery plugin for - http://welcome.totheinter.net/columnizer-jquery-plugin/ . This one solve all what i need.

Categories