Comments (3)
I corrected your sandbox so it didn't have duplicate keys and I'm unable to reproduce. Please check if you have duplicate keys
from react-spectrum.
I've forgotten to update the keys, yes the keys are the reason for getting those white, but if I increase my option height still im getting the white spaces even though i have given the unique keys.
And i found the reason too.
In our listbox base we are fixing the estimated row height as some px.
let layout = useMemo(
() =>
new ListLayout<T>({
estimatedRowHeight: scale === "large" ? 48 : 44,
estimatedHeadingHeight: scale === "large" ? 33 : 32,
padding: scale === "large" ? 5 : 4, // TODO: get from DNA
loaderHeight: 44,
placeholderHeight: scale === "large" ? 48 : 44,
collator,
}),
[collator, scale]
);
When i try to give more height to option manually then i'm getting this blank space. So if i want to increase the height of the option outise, then i need to increase the estimated height in layout too.
I got this, but I don't know how this is causing the white spaces can you give me any brief what is this layout and how it effecting the blankspace.
from react-spectrum.
I can't reproduce. Can you update the reproduction instructions or update the sandbox if it isn't reproducing for you there either?
from react-spectrum.
Related Issues (20)
- From Collection.mjs : use-sync-external-store/shim/index.js doesn't provide an export named: 'useSyncExternalStore' HOT 3
- Typosquatting on react-aria/toast? HOT 1
- RAC `Slider` causes "No label associated with a form field" issue HOT 3
- [useTablist] tabpanel elements are not focusable when layout differs as per docs HOT 7
- Submenu doesn't open on arrow key when using typeahead to select it if keypresses are made once it's already been focussed HOT 4
- Default value for `placement` prop in RAC Tooltip docs should be `'top'` instead of `'bottom'` HOT 1
- Textfield validation icon is clipped out of the box HOT 1
- useListState is entering infinite loop after removing last focused item that is not disabled HOT 2
- useSliderThumb - excludeFromTabOrder won't modify the tabIndex HOT 4
- React Suspense components wrapped in Provider emit runtime errors when using SSR HOT 1
- Video Controls are not respected when using FocusScope HOT 5
- The code inside `<script>` element rendered by `<LocalizedStringProvider>` doesn't run on Next.js `not-found.js` page HOT 3
- Support hover event for Tabs
- Buttons don't get pressed using Vimium HOT 2
- MenuItem with href doesn't work in Chome device toolbar HOT 3
- No matching export for import "getSyntheticLinkProps" HOT 34
- Is there any document available that guides how to use the `Virtualizer` component? HOT 2
- Type errors when rendering components in React 17 HOT 2
- Tabs are not getting rendered in specific scenario HOT 2
- RAC `TagGroup` within a `GridList` item causes a crash in 1.3.0 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spectrum.