I am using the Material UI react library. I have an InputBase component with multiline prop.
When the wrapper div/element is shrunk to 0px width and expanded to full width again, the InputBase with multiline property is set to a max height even though there is no content inside it.
Codesandbox: https://codesandbox.io/s/jovial-zhukovsky-5dric?file=/index.html
Has anyone faced this issue? Any possible solutions?
Related
I need to cutout both images (icons that have transparency) and text into a Container.
The main method to achieve this appears to be using ShaderMask.
My main issue is that this doesn't allow me to wrap my text or image in a simple Container, with fixed height and decoration.
How can I either have this mask/cutout apply to a parent widget or gain further customisation options on the child? Or is there a more flexible option than ShaderMask?
I create a GridView in flutter with the shrinkWrap set to true (which I expect the GridView will be shrink exactly as the content's size).
But in my demo (Green background color indicates GridView , and the Red Color indicates the content widgets in the GridView)
I found that , the GridView will not shrink as small as possible to it's contents. The GridView's height is a bit larger than the GridView's content height .
What makes the GridView not shrink as small as possible?
OK, after debugging with the source code . I found the reason to this problem:
Seems when you create a ListView & GridView with a null padding passing to it . Flutter SDK will make a Inset (RenderSliverPadding)during the layout of the ListView&GridView.
So the way to remove this padding is set a padding in the ListView&GridView's constructor
how to control flutter bottom sheet height with its inner content without fixed height? totally I just want a height change with its inner content size
Use a ConstrainedBox give a minimum and maximum height and width as you need and the child of the ConsrainedBox should be your bottom sheet container and you are good to go.
Here is the youtube link on ConstrainedBox.
Here is more how you can deal with box constraints: https://flutter.dev/docs/development/ui/layout/box-constraints
here:
below the picture there is an inline text, but it is not visible. Maybe be the picture's height takes up the whole height? Any idea?
You are using GridView.builder. Instead you can use GridView.count.
In GridView.count, there is a parameter childAspectRatio which you can use to increase the height of the grid.
i am building web app for desktops and i find material-ui wastes lot of space when displaying the components right out of the box.
AppBar is rendered with padding of 24.
Passing the style to the appbar is only adding in addition to 24 instead of overriding.
Just compare the height of menubar of stackoverflow vs material-ui appbar
How to reduce AppBar height atleast 10px less?
You can override component style. You need to apply a className or a style like this :
<AppBar className={classes.appBar} />
With web inspector, you can find your css class. Something like MuiAppBar-XXXXXX
Hope this help!