Reduce size of widget

[Andrew Bettcher]

I have a widget that is a list of categories and when you click a category, the items within that category are displayed below like this:

(Please ignore the data and the colours. This is just test data and I'm waiting for the colour scheme).

Obviously the top part of the widget has a load of whitespace which I want to get rid of. I'd like the category selector to be a reasonable size (say 3 columns) and the item list to be full size. How can I do that?

I guess that I need to set the column container to 12 and then somehow limit the display size of the top panel in the HTML?? 

[Tom Sienkiewicz · Accepted solution]

Perhaps a nice approach would be to split that into 2 widgets. The bottom part looks like you can just leverage the OOTB list widget?.

The upper widget would then just serve to pick a category and pass it to the list widget.

Then you can set the desired layou, the picker can e.g. occupy left 3 columns and the list the remaining 9 columns.

If you want to stick to 1 widget yes I would increase the container to full width and then you can use either flexbox or css grid in your widget to position the elements accordingly.

[Andrew Bettcher]

Hi Tomasz,

Thank you for your response. I did think about this but my experience of widgets is limited. I'll give it a go and see if I can get it working.

Thank you. 

[Andrew Bettcher]

Scratch that. I just did it by adding another div class around my panel header:

<div class="col-md-4 col-md-offset-8">

I'm very slowly getting the hang of this. 😉