custom widget layout

[Tomaz Bracic]

I would like to be able do a custom layout of a widget. Here I mean, I would like to set width and height on a per-widget basis.
Tried to bring know-how from various parts of the documentation, but sizing is something I can't get right.
The problem is, I don't want all the widgets with the same size properties. I would like to make a little bit more random. Per widget. I tried few things, but it doesn't execute them. :( I would like to have a graph in one of them for instance. And so on.

I there a way that I can bring per widget scss file? So to have like general overall layout designed, but if needed, add scss file next to my-widget.js... where I would be able to address this issues?

[Pascal Widdershoven]

Hi @ulutomaz thanks for your question!

There are a couple of ways to go about this, from simple to more complex:

1. You can pass a custom className or inline styles to a Widget:

   export const HelloWidget = _props => (
     <Widget className="myClass" style={{ minWidth: "400px" }}>
        Hello world
     </Widget>
   );

   className here could come from a CSS module too.
   In this case you're custom styles will have to cooperate with the default flexbox based layout.

   This solution is fine for simple customizations, like for example setting flexBasis: 100% for the widget to always take the full page width.

2. You can use a complete alternative layout, see https://github.com/pascalw/dashbling/blob/master/docs/customize-layout.md. There you'll find an example to use a CSS grid based layout for example.

3. You could chose not to use the default Widget component at all. The Widget component is mostly there as an easy way to have a consistent layout and styling out the box, but if you want to truly customize it might not suit your needs.

   A Dashbling dashboard is just a tree of React components, where you bind data to via Dashblings connect function. So you're free to render anything! This would be totally valid for example:

   const CustomWidget = connect("hello")(props => (
     <div>
       <span style={{ color: "hotpink" }}>Hello {props.name}</span>
     </div>
   ));
   
   export default _props => (
     <Dashboard>
       <CustomWidget />
     </Dashboard>
   );

Does this answer your question?