Post Content
When trying panel fullscreen, the height doesn't expand. I think that voyager-resize-full or related panel-action is not working.
Hey!
Oh that is an interesting finding!
Here is a very quick fix:
- Edit the
public/wave/css/admin.css
file, and add the following:
.panel.is-fullscreen .panel-body {
height: 90%;
}
.panel.is-fullscreen .mce-statusbar {
visibility: hidden;
}
That is the additional custom CSS file that wave uses to define some custom classes for the Voyager admin as per the docs here:
https://voyager-docs.devdojo.com/customization/additional-css-js
Let me know how it goes!
















Thank you for the quick reply. Unfortunately, it didn't work.
Fullscreen
edit-add.blade.php
...
@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
.panel .mce-panel {
border-left-color: #fff;
border-right-color: #fff;
}
.panel .mce-toolbar,
.panel .mce-statusbar {
padding-left: 20px;
}
.panel .mce-edit-area,
.panel .mce-edit-area iframe,
.panel .mce-edit-area iframe html {
padding: 0 10px;
min-height: 350px;
}
.mce-content-body {
color: #555;
font-size: 14px;
}
.panel.is-fullscreen .mce-statusbar {
position: absolute;
bottom: 0;
width: 100%;
z-index: 200000;
}
.panel.is-fullscreen .mce-tinymce {
height:100%;
}
.panel.is-fullscreen .mce-edit-area,
.panel.is-fullscreen .mce-edit-area iframe,
.panel.is-fullscreen .mce-edit-area iframe html {
height: 100%;
position: absolute;
width: 99%;
overflow-y: scroll;
overflow-x: hidden;
min-height: 100%;
}
</style>
@stop
...
<div class="panel-body">
@include('voyager::multilingual.input-hidden', [
'_field_name' => 'body',
'_field_trans' => get_field_translations($dataTypeContent, 'body')
])
@php
$dataTypeRows = $dataType->{($edit ? 'editRows' : 'addRows' )};
$row = $dataTypeRows->where('field', 'body')->first();
@endphp
{!! app('voyager')->formField($row, $dataType, $dataTypeContent) !!}
</div>
...
admin.css
.voyager .navbar.navbar-default .navbar-header .navbar-brand, .voyager .navbar .navbar-header .navbar-brand{
background: #046afe;
}
.panel.is-fullscreen .panel-body {
height: 90%;
}
.panel.is-fullscreen .mce-statusbar {
visibility: hidden;
}
Also, I ran php artisan optimize:clear
Hey there,
After adding that custom CSS to the admin.css file, I would suggest clearing the cache of your browser or doing a hard refresh, so that you could load the new CSS changes.
Let me know how it goes!
Yes! Testing with Incognito confirmed your suggestion. Thank you
















That is perfect! Happy to hear that it is all working now!