'Backpack laravel align chart widgets in a row

How to align two chart widgets in a row?

$widgets['before_content'][] = [
    'type'       => 'chart',
    'controller' => \App\Http\Controllers\Admin\Charts\TotalViewsChartController::class,
    'content' => [
        'header' => 'Total Views',
      
    ],
    'wrapper'       => ['class' => 'col-sm-5 col-md-5'],
];

$widgets['before_content'][] = [
    'type'       => 'chart',
    'controller' => \App\Http\Controllers\Admin\Charts\ActiveUsersChartController::class,
    'label' => "Active Users",
    'content' => [
        'header' => 'Active Users',
       
    ],
    'wrapper'       => ['class' => 'col-sm-5 col-md-5'],

];

I tried multiple wrapper options but none worked. This is the dashboard.blade.php file.

laravelwidgetlaravel-backpack


Solution 1:[1]

Try:

$widgets['content'][] = [
    'type'       => 'chart',
    'controller' => \App\Http\Controllers\Admin\Charts\ActiveUsersChartController::class,
    'label' => "Active Users1",
    'content' => [
        'header' => 'H1 Active Users',

    ],
    'wrapperClass' => ['class', 'row'],
    'wrapper'       => ['class' => 'col-sm-5 col-md-5'],

];

$widgets['content'][] = [
    'type'       => 'chart',
    'controller' => \App\Http\Controllers\Admin\Charts\ActiveUsersChartController::class,
    'label' => "Active User2s",
    'content' => [
        'header' => 'H2 Active Users',

    ],
    'wrapper'       => ['class' => 'col-sm-5 col-md-5'],
];

$widgets['before_content'][] = [
    'type'        => 'div',
    'class' => 'row',
    'content'     =>  $widgets['content'],
];

What was changed?

  1. change widget section "before_content" to "content"
  2. add these content widgets to the actual "before_content" widget section so that you can have a div with the "row" class.

Option #2:

Just add this line if you want to keep using "before_content":

Widget::add()->type('div')->class('row')>content($widgets['before_content']);

Solution 2:[2]

I know this is old, but I also bumped into this.

You can add a row kind of widget and add the desired widgets as content in the following way.

[
'type'    => 'div',
'class'   => 'row',
'content' => [ // widgets here
    [ 'type' => 'card', 'content' => ['body' => 'One'] ],
    [ 'type' => 'card', 'content' => ['body' => 'Two'] ],
    [ 'type' => 'card', 'content' => ['body' => 'Three'] ],
]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dharman

Related Questions