[4.0][Backend-template] module size on dashboard

[micker]

Steps to reproduce the issue

as i can test changing bootstrap grid for dashboard module doesn't works : 1 edit quickicon module 2 set bootstrap size to 12

Expected result

module need to display in full width

Actual result

=> no change module is display in 1/2

[ghost]

Issue confirmed.

[micker]

thanks

[micker]

for me its important to correct this because it will break all admin module ! impossible to create a full width dashboard (virtuemart hikashop, custom dashboard)

[coolcat-creations]

Also it needs 4 BS classes for the different breakpoints and not only one, or not?

[micker]

i realy think we need to add possibility to have width module for dashboard .. maybe need to add grid class ?

[coolcat-creations]

Agree, the module class suffix can't be used for the grid. Just tested it...

[micker]

sorry i don't understand i need to test someting ?

[coolcat-creations]

@micker - you can set up a module class suffix but I just tested, it does not solve the issue you have to the fullest...

[coolcat-creations]

@C-Lodder and @ciar4n - can you help on this issue? What needs to be changed exactly? We have grid-template-columns: 1fr 1fr; for the card-columns, does that have to be changed to a more generic columns like 12 x 1fr or so? Do we need breakpoint parameters in the modules? I can create a PR but I don't know what has to be done to solve it.

[micker]

i test with suffix, bs class nothing works @C-Lodder @ciar4n we realy need some imporvement here because all dashboard function can be display in 2 columns !

[micker]

in j4 in j3 all admin module are impacts !!!

[micker]

@coolcat-creations @ciar4n @C-Lodder @angieradtke for me 2 solutions

• adding column class for module (mb3, mb2, mb12 ..)
• using postion, for now icon, cpanel => display same ... maybe we can add a full width position ?

[micker]

Sorry i will try to bump more person @brianteeman ?

[brianteeman]

https://www.michaelbromley.co.uk/blog/why-i-havent-fixed-your-issue-yet/

[micker]

Lol @brianteeman i try to motived lead contributor... I know you cant solve all thing with your little hand :stuck_out_tongue_winking_eye:

[angieradtke]

Hi maybe this could help, just an idea

.card-columns { grid-template-columns: repeat(auto-fit,minmax(max(calc(50% - 30px),250px),1fr)); }

All the best, stay healthy .-) Angie

[micker]

Cool angie ...I dont understand why bs class in module backend doesnt works ...

[angieradtke]

I think, here we are dealing width css-grid and bootstraps flexbox-grid. 2 techniques are mixed.

[micker]

@georgewilson maybe ? :laughing:

[micker]

@angieradtke your code works but strange to need to override an existing function ?? @wilsonge any idea why the backend template can't use bs according module option ?

[micker]

hello i test last version with BS5 no evolution please don't ignore it !

[brianteeman]

Please test #33045

[infograf768]

afaik #33045 will not let full width display as we have a grid separating the modules in 2 columns with grid-template-columns: 1fr 1fr; and therefore full width concerns only one column.

[micker]

thanks @infograf768 @Quy can you reopen this issue ?

[infograf768]

I guess this can be overriden for a specific component dashboard though. Example: class="cpanel-modules cpanel-mycomponent"

.cpanel-mycomponent {
  .card-columns {
      grid-template-columns: 1fr;
  }
}

[brianteeman]

That is the only way other than creating your own admin template

[micker]

yes we can do this, but that realy dommage to kill an old beahvior (j3 heritage with cpanel in full width) to limit it in 2 columns only team do an important work to add bs5 in admin but we can use it ... @ciar4n @dgrammatiko no way to keep this ?

[dgrammatiko]

Someone could implement a design mode, similar to https://perfectgrid.io/demo and thus allow the modification of both the width and height. That said I must also note that the way things are handled in the com_cpanel (the API for the modules, etc) is at least naive and very unfriendly to devs, so, imho the com_cpanel needs way more refactoring than adding some widget for height and width for individual modules...

[micker]

@dgrammatiko it can be powerfull but maybe to many works for a 4.0, if only allow to use width option according module option value we can easly create 1-2-3-4 columns

[ciar4n]

It's not that simple as the current dashboard is a masonry layout. The current js for that layout will not handle varied widths. As I see it there are 3 options...

1. Use a more advanced masonry js (eg. https://masonry.desandro.com/)
2. Implement a layout builder as suggested by @dgrammatiko
3. Create a new module position above the current 2 column masonry layout which will work with your bootstrap classes. This is probably the only viable option.

[micker]

Yes the layout builder Can be cool but maybe too powerfull... A fullwidth position on top (before 2 columns) Can be simplier @ciar4n i am agree