Comments (8)
Hey @lukasschrammknowit ... Good question. I guess this is probably a historic "problem".
The other options do not have that big of a need for the width, so this just has been overlooked.
@joserodolfofreitas I think we could improve a bit here. Agreed?
from material-ui.
AFAIK we have a fixed content width on the whole doc
For most content it's fine because we build it to be great with this width
But for API tables, it's a shame to see this much white space and at the same time have a UI that would benefit from this space.
from material-ui.
AFAIK we have a fixed content width on the whole doc For most content it's fine because we build it to be great with this width But for API tables, it's a shame to see this much white space and at the same time have a UI that would benefit from this space.
We could probably adjust the width to accommodate for more realty (when available) of other elements as well ... this would also solve this specific pain point
from material-ui.
Why is the width of tables on the documentation so terribly small?
@lukasschrammknowit what screen do you have? What's your browser zoom level configuration? 100%?
The width is set as max-width: 105ch;
which is meant to fit 105 characters on a given line. The idea is to limit the width so that when the eye needs to go to the next line, it's not lost.
from material-ui.
The idea is to limit the width so that when the eye needs to go to the next line, it's not lost.
But would you agree that for a table like the one displayed above, the width feels like an arbitrary limiting favor?
from material-ui.
I have different screen sizes (3840x1600, 2560x1400), but this is generally a problem existing on every single screen size existing. Limiting the width is just not useful in general I guess.
from material-ui.
I do think it's useful for regular doc pages.
Here is what it would look like on a 3440*1440 otherwise:
But for tables, the problem is that we limit the width with the same approach a basic line of texts, but we have several columns so each column becomes super small when it contains a lot of text.
We have been exploring several solutions.
One of them is to get rid of those tables and replace them with a different UI:
If comes with some trade-off and the feedback we got highlight that we won't be able to have a UI that fits perfectly all components. For components with props that requires long descriptions and complex TS interfaces, the new UI scales better, but for basic components it is over killed and reduces the readability of the whole.
Just increasing the width of the table can improve the experience for people with big screens, but it's not a perfect solution either because people with small screens will still experiment the same problems.
cc @danilo-leal
from material-ui.
The option to increase the table's container width if you're on a big monitor definitely makes sense (it avoids horizontal scroll while allowing you to see all columns at a glance), and it'd be a nice feature to support. We don't intend to get rid of the table layout — it has its place, and for more complex components, with more extensive prop sets, precisely as the Date Pickers, it's more fitted. However, I don't feel like it's a super fast thing to pull off; we'd need to carve out some time to make it right, particularly as we already support different layout types for the API content, which naturally made this whole area a bit trickier to maintain.
I'll transfer this issue to the main repository and add it to the backlog!
More updates whenever we get to prioritize it.
from material-ui.
Related Issues (20)
- [pigment-css][core] Use npm package name for folder name HOT 2
- [joy-ui] Add Spin component HOT 6
- [material-ui][Button] Hover animation glitches when component state changes HOT 2
- [material-ui][Select] SelectProps suddenly break by making variant required HOT 10
- [material-ui][StepLabel] Component displayed in the correct direction HOT 2
- [material-ui][ButtonGroup] Problems with inheriting styles from shared component HOT 3
- FormLabel
- [material-ui] Restructure so nested slots are not needed
- [material-ui][Select] Typescript errors with generic argument for multiple select HOT 2
- [material-ui][joy-ui][base-ui][Autocompelte] Highlighted index is broken when inserting new item HOT 3
- [material-ui][Tabs] Scrollable variant fails test when clicking the tab (error reading 'offsetHeight') HOT 1
- [docs] Provide a hook or function we can dynamic inject our custom theme options
- [system][cssVars] Add functional update support to `setMode` from `getColorScheme` HOT 4
- [material-ui][docs] The "Basic dialog" example doesn't support back button HOT 1
- [material-ui][Drawer] Unclear docs for displaying it under the Appbar HOT 1
- [material-ui][Select] Type arguments do not constraint `variant` prop accordingly HOT 3
- [joy-ui] Make the size prop breakpoint-aware HOT 1
- [material-ui][Autocomplete] Typing first letter of the label inside a menu closes it HOT 4
- [material-ui][Select] TS errors with the updated `SelectProps` and when used in Storybook HOT 4
- With date-fns adapter, date picker date formatting for days of month < 10 always has zero padding, even when format specifies otherwise.
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 material-ui.