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!
Related
It seems the Icon widget has a built-in padding, but I would like to remove the padding in order to properly align the icon with other widgets on the left side.
As you can see from the screenshot below, the widget itself is perfectly aligned to the left (I wrapped the Icon in a Container with background color just for testing purposes), but the icon has some padding and it looks missaligned.
Is there a possibility to remove this padding?
I just checked the Icon implementation (you can take a look as well) and could not find anything about added padding. I am not 100% certain but I assume the whitespace is from the icon itself.
I have an alternative solution though:
Get the icon in SVG format (you can download Google Icons from Google Fonts
Remove the padding using a SVG editor (you can use Figma Free version)
Add the icon as an asset in your pubspec.yaml
Good luck!
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?
Any ideas on how to go about styling flutter's Expansion Panels and/or Expansion Panel Lists? By default it uses the theme's cardColor attribute for the background. I would like to change things like the border and elevation.
Thanks
How to align and pin to buttom a widget in BIRT Report Designer (in Eclipse)? I can find properties for aligning the text inside text widget, but how to align widget itself, as to sheet? I gazed up at Advanced properties, but I didn't find anything helpful, and I tried to change Style of widget, but it didn't help.
If you mean "align to the bottom of the page" - this is not possible with BIRT.
I have a material-ui AppBar that sits up high in the composition, something like this:
<App>
<AppBar/>
<Main>
<Route component={FooPage}/>
<Route component={BarPage}/>
</Main
</App>
I would like FooPage and BarPage to be able to "inject" their own content into the AppBar, such as Menus, Selects, etc. -- Without the AppBar or the component that hosts the AppBar to be specifically aware of Foo and/or Bar or any other player that does this. I can imagine a novel way of doing it by having Foo announce to the world that "Foo is active" and having the FooBar-aware AppBar component, respond by saying "Fine...I'll render a Foo-Menu for you.."
What I want is to be able to do is pull this off without the React version of gnarly switch/case. I am pretty newish to React, and I think this is not specifically a material-ui question, but I wonder...Is there is a direct way of loading children into an AppBar (or ToolBar) where AppBar is agnostic towards its contents? And if so, what does that look like syntactically speaking?
AppBar has two properties that can accept elements as values. As such, you could utilize the iconElementLeft or iconElementRight properties to pass in whatever element you want to display.
Check out this JSFiddle as an example:
https://jsfiddle.net/Asalem1/ha6v1714/26/