Link Video: https://drive.google.com/file/d/1ifx1orms0PHYb3LLhf5lcwrVFyjPVk1j/view
As you can see from the video, native base in this case behaves very strangely, as if it were broken.
First problem:
The tabs are not fixed under the toolbar, as they
normally should.
Second problem:
I am in the first "TAB1" (Info), I scroll, no problem except for the
fact that the "TABS" should be fixed.
I click on the "TAB2" (Movie), the elements are rendered.
I do not even need to scroll the elements, if I click on the "TAB1"
(Info) already, it will take the same height as the "TAB2" (Movie),
that is the maximum height rendered.
Instead, as usual, each TAB should have its own height.
Link expo to try it: https://snack.expo.io/HJrZ9jXEf
The problem seems to be Animated.ScrollView together with the tab do not get along.
But without Animated.ScrollView I can not do the scroll effect.
How can I solve?
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
I'm using ReactiveSearch 3.30.0.
Here's how I use the ReactiveList component in my Next.js project.
<ReactiveList
....
infiniteScroll={true}
showLoader={true}
pagination={false}
loader={<MyCustomLoader/>}
....
/>
The problem is during the loading that occurs,
When I click on a filter item
or
When Scroll more to the bottom
the MyCustomLoader is always at the bottom.
Expected outcome for the MyCustomLoader is,
When I click on a filter item => MyCustomLoader at top
and
When Scroll more to the bottom => MyCustomLoader at bottom
The reason is, since my results list is long and scrollable, the loader is not shown when I click a filter item. It is actually rendered on the DOM, because I could see it when zoomed out the browser window (but is outside visible area to the user).
Related GitHub issue https://github.com/appbaseio/reactivesearch/issues/749
Any workaround is highly appreciated. Thanks.
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
I have this absolutely positioned icon <a>, hence its parent <li> is relatively positioned. The list items are in a scrollable <div>.
Problem is except for these <li>s other elements in the div are scrolling along with the height of the div, whereas the <li>s stays fixed whereas I expected the <li>s also to be scrolled along inside the div.
Tried overflow:hidden, zoom:1, doesn't work.
Here is the jsfiddle link
Found the answer from this question, https://stackoverflow.com/a/13996983/1531426
I thought I searched enough :(
Adding position:relative;overflow:auto; to the container div which has the height, fixes the issue.
See the image above, the grid header is always on top.
Here's the image:
This images is like a Menu. When I click the first one, open the menu in horizontal line. WHen I click the second (from top to botton) open the menu for this ˜group˜.
This is an iconic menu.
For the first time, its only shown the first column of icons (in this case "bar" and "favorites", and the grid is displayed correctly.
But once the "bar" button is clicked, the rest of line appears, but the grid header is on top.
This appears to be an absolute layout problem.
I recommend not change extjs classes.
If you do that, will get problems in a future update.
I found that the problem is in the ext-all.css file.
the z-index property in the class:
.x-docked{
position:absolute!important;
z-index:1
}
seems to be the problem.
If I change to zero, it works.