I have spent the last few weeks making Dash webapps, and one aspect that keeps coming up is size. It seems that the sizing default in Dash ( size of the headers, labels, padding in between graph and edge of figure, etc.) is too large for a webapp that ismeant to have 2-3 per view.
I keep “zooming out” in browser to get a more aesthetically pleasing view. So much so, in fact, that I had to add the zoom CSS styler. However, while this works in a punch it does not work well with flexbox and may have unknown behaviors, so I’d rather avoid it.
Is there a Dash property that allows the overall sizing to be smaller?
Both good for sizing, I think. I think it’s probably fair to say that DMC gives a rather nicer look and feel than DBC - would be interesting to know what others think on that though.
This site (created by @AnnMarieW ) shows what the available DBC themes look like:
And the DMC doc site I linked above is itself a DMC app, so shows what a DMC site looks like - the page linked includes the styling code needed to get what you see at that site.
Have either of you used css grid? I am considering a switch from flexbox to grid; after research, it seems the generally preferred option, but I am thinking dashboards may be the exception.
I usually use dmc.Grid(), but I think it also uses flexbox, not (CSS) grid.
I have HTML created using dmc.Grid() that includes a div with class=mantine-Grid-inner that (developer tools shows) is styled display:flex, not display:grid.
Am I completely misunderstanding what’s happening here?
Hi both, realizing I never found a good solution to my specific quesiton on zoom.
To elaborate, the default styling of my dash apps always appears too big, like a children’s toy. I would prefer a “smaller” view, ie more zoomed out - smaller font, tick labels, less white space between graphs and titles, etc.
I have bootstrapped with some css * {zoom: 0.995} but I don’t think this is best practice, as I am changing the zoom property on a user’s browser.
Does anyone know of a param in Dash (or any of the bootstrap libraries) to achieve a more zoomed out view?
Is there any chance you could could post a complete example that illustrates the problem?
If I use DBC (with one of the standard DBC theme stylesheets) or DMC I don’t see this kind of problem.
I guess if you don’t use either of these things, you might well need to add a stylesheet to your app to get things the right size. (And I agree using * {zoom: 0.995} probably isn’t the best thing to put in there).
Do you still have the problem if you do this?
from dash import Dash
import dash_bootstrap_components as dbc
...
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
OK, I’d thought something more extreme was going on - the screenshots are really helpful. So you need to adjust things like font size - should be possible, but you may need to look through your stylesheets to work out how things fit together.
Here’s one way of doing one thing if you’re using the Bootstrap stylesheet. (There may be other ways, there will be other things you’ll also need to do, and you may not want to use Bootstrap, but I’d hope any other standard stylesheet might have some equivalent)
In bootstrap.css, text size (say for html.P()) is controlled by the custom property –bs-body-font-size (default 1rem). So you can override it by adding your own stylesheet containing, say
:root {
--bs-body-font-size: 10px;
}
I think you need to download bootstrap.css and search through it (and/or use Inspector) to work out what properties control what, but there’s usually some way of altering these basic defaults.
You should be able to similar things to adjust font size if you use Dash Mantine Components, and DMC gives (imo) better-looking results than DBC these days.
